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
Related
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?
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.
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);
}
});
});
I have jqplot and I want to download it once click a button as a jpg or png. I can do it using
$('#chartdiv').jqplotSaveImage();
(chartdiv is the div with plot)
It is working in chrome and firefox only. In IE it is not working.I tried in IE 11.
And I have another problem in chrome the downloaded image file name is 'download' and in firefox it is some wired name with .part extension (ex :- ka8ShgKH.part). Is there a way to put plot title as the download file name ?
thank you.
$("#btnSaveImg").on("click", LoadImage);
LoadImage = function(){
$('#chartdiv').jqplotSaveImage();
}
EDIT
jqplotsaveimage function
$.fn.jqplotSaveImage = function() {
var imgData = $(this).jqplotToImageStr({});
if (imgData) {
window.location.href = imgData.replace("image/png", "image/octet-stream");
}
};
I'm using jqPlot and I had issues using the above in IE and even if it worked in Chrome I could not name the downloaded image.
I found this case force download base64 image and the http://danml.com/download.html . That's working both in later versions of IE and Chrome and you can save the image with your own filename. The download.js can be used for more than just images.
//include the downoad.js file from http://danml.com/download.html
<button id="dwnl-chart-1" onClick="$.fn.jqplotSaveImage('chart-1', 'chart_name">Download as image</button>
$.fn.jqplotSaveImage = function(id, filename) {
var imgData = $('#'+id+'-parent').jqplotToImageStr({});
if (imgData) {
download(imgData, filename+'.png', "image/png");
}
};
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)
})