javascript - html2canvas 保存带有扩展名的 Canvas 图像

Question

我有一个带有按钮 onclick 的网页，该按钮应该截取该页面的屏幕截图并以 (.jpg) 扩展名下载。为此，我使用以下代码:

$("#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);
}

当我点击按钮时:

如您所见，我的图像名称为“下载”，没有任何扩展名。我需要下载具有特定名称和扩展名的图像，例如“myImage.jpg”

Answer 1

如果你能把按钮改成<a>标签，您应该能够使用下载属性。

$('#image-link').attr('href', 'data:image/png;base64,<data>").attr('download', 'filename.png');

我自己并没有玩太多，但据说它可以在 Firefox、Chrome 和 Edge 中使用:https://caniuse.com/#feat=download