CODEWITHSUNDEEP
javascriptjqueryhtml2canvas
Noor Allan
Noor Allan

Reputation: 421

html2canvas saving canvas images with extension

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:

show image

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"

Upvotes: 0

Views: 777

Answers (1)

dotmartin
dotmartin

Reputation: 541

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

Upvotes: 1

Related Questions