I am using html2canvas and Canvas2Image in order to get a screenshot of a map on my screen.
The functionality is running on a button click like this:
$(document).ready(function() {
$("#screenshot2").click(function(){
html2canvas($("#OpenLayers_Map_15_OpenLayers_ViewPort"), {
useCORS: true,
onrendered: function(canvas) {
theCanvas = canvas;
// Convert and downloadimg-out as image
Canvas2Image.saveAsPNG(canvas);
}
});
});
});
What I want is to have a loading sign while the process is running. It's easy to initiate the "loading image" on button click, but I haven't figured out how to stop it. For example, in Ajax, there are the beforeSend and afterSend. Is there something equivalent in this case?
Related
I have a web page with button onclick on that button a screenshot of this page should be taken and downloaded with (.jpg) extension.
to do that I use the following code:
$("#Finish").on('click', function () {
// take a screenshot and save it.
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
DownloadImage();
}
});
});
function DownloadImage() {
var imageData = getCanvas.toDataURL("image/png");
var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
window.open(newData);
}
when i click the button:
As you see I have image with "download" Name without any extension.
I need to download the image with specific name and extension for example "myImage.jpg"
If you can change the button into a <a> tag, you should be able to use the download attribute.
$('#image-link').attr('href', 'data:image/png;base64,<data>").attr('download', 'filename.png');
Haven't played around with it too much myself but it is said to work in Firefox, Chrome and Edge: https://caniuse.com/#feat=download
I am using html2canvas for capture a screenshot of particular div, it works fine but not caprturing the images in that div
My Script code is below:
<script type="text/javascript">
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
logging: true,
allowTaint: true,
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/,"data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "design.png").attr("href", newData);
});
Here is the link of live problem tht i am facing, check that by click on preview button appearing on the page scroll down a little bit
https://www.citystatebeads.com/pages/example-page
Straight from the README on html2canvas:
It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.
Since your image is located on https://cdn.shopify.com and your origin is https://www.citystatebeads.com, it's not going to render the image.
We know that there are several questions discussing this. However, we have not found anything that works for us. What we originally were looking for was a way to save a div as an image to be able to print it nicely. We then encountered html2canvas, which seemed perfect.
The only problem is that we use SVG elements (lines that connect our objects), and they will not appear in the image. This seams to be an issue for many more people, yet their problems appears to have been solved by the previous update. https://github.com/niklasvh/html2canvas/issues/95
We have tried to allow taint to get the SVGs (as suggested here) but it doesn't work.
We load both html2canvas and html2canvas.svg
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
This function is called when someone press the "Save to be able to print" button:
$(function() {
$("#btnSave").click(function() {
html2canvas($("#object_container"), {
allowTaint: true
});
html2canvas($("#object_container"), {
onrendered: function(canvas) {
theCanvas = canvas;
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=800px, height=800px");
canvas.toBlob(function(blob) {
saveAs(blob, "savedImage.jpg");
});
}
});
});
});
Right now, we do not care about the saved file, only the image that is opened in a new window. In that image we can't see our svg lines.
Any suggestions? (Did we set the allowTaint properly?)
How to take screenshot of a DIV which contain more than one images? Actually I am dragging images into DIV and want to take screenshot using Jquery or Javascript but without using server side scripting language.
Assuming you have a button to click (to trigger the capture), and that the images are on the same domain, load the html2canvas JS file, then add this:
$('#btn').click(function() {
html2canvas($('#DIV'), {
onrendered: function(canvas) {
//do something with the canvas element - upload, append to a display element, etc. For example:
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
So basically, I am using a simple library called HTML2Canvas
This is my current code working great and is being called from an onclick event from a button:
function saveForm()
{
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
Basically, all it does is take a screen shot and append it to the bottom of the page.
There was already a question similar to this, although the answer did not work and the download is always a corrupt jpg file:
html2canvas saving as a jpeg without opening in browser
Would there be a way to force a download within this function instead of appending it to the bottom of the page?
Use canvas.toDataURL to get the canvas content as an image src
open a window/popup
add an <img> to the popup
assign the image src as src for the image
function saveForm() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var open = window.open('','','width=500,height=500')
open.document.write('<img id="img" style="width="400">');
open.document.getElementById('img').setAttribute('src', img);
}
});
}
Tested the code inside onrendered, and it works for sure - but not along with html2canvas.
If you right click on the image in the popup -> save image as, the saved image is valid.
The reason why I am using setAttribute and not simply src="..." is that if you assign the data src as string the image get corrupted.
Edit
I know :( I think you have to set HTTP Headers to force a download, and this can only be done by the server (correct me if I am wrong). I think of a "proxy" on the server like this mockup, download.php :
<?
$src=$_POST['src'];
header('Content-Type: image/png');
header('Content-Disposition: inline; filename="download.png"');
header('Content-Length: '.count($src));
echo $src;
?>
and call it by
var img = canvas.toDataURL("image/png");
window.open('download.php?src='+img);
But then you will face a lot of Request-URI Too Large-messages, unless all your canvas-images is in icon-size.
A second way - and probably the one that would work - would be to save img in a table on the server through ajax, eg calling a script with img src that saves it. When this call is finished, you could call another server script with the correct headers for image download, including the img src saved just before. But this is a more extensive approach you could try yourself..?
Here is a solution that builds on the accepted one to enable a download button without server-side code using jQuery.
https://codepen.io/nathansouza/pen/OXdJbo
function download(url){
var a = $("<a style='display:none' id='js-downloder'>")
.attr("href", url)
.attr("download", "test.png")
.appendTo("body");
a[0].click();
a.remove();
}
function saveCapture(element) {
html2canvas(element).then(function(canvas) {
download(canvas.toDataURL("image/png"));
})
}
$('#btnDownload').click(function(){
var element = document.querySelector("#capture");
saveCapture(element)
})