html2canvas使用扩展名保存画布图像

Question

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"

Answer 1

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