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);
}

当我点击按钮时：

如您所见，我的图片名称为 "download"，没有任何扩展名。我需要下载具有特定名称和扩展名的图像，例如 "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

html2canvas 保存 canvas 个带扩展名的图像

html2canvas saving canvas images with extension

javascript

jquery

html2canvas