使用 html2canvas 保存图像 - 纯 Javascript

Question

我正在尝试制作一个按钮来捕获我的页面并将其保存为 png。

现在，我可以用我需要的分辨率复制它，但不是显示它，而是需要显示一个对话框并像 "Save as..." 一样保存它以重命名文件。

function myRenderFunction(canvas) {
  destination.appendChild(canvas);
}

var element = document.getElementById('element');
var destination = document.getElementById('destination');



html2canvas(element, {
  scale: 3,
    onrendered: myRenderFunction
});

这是我当前进程的JSFiddle。

Answer 1

要在本地保存图像，您可以将渲染函数更改为以下内容：

function myRenderFunction(canvas){
    var a = document.createElement('a');
    // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
    a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
    a.download = 'somefilename.jpg';
    a.click();
}

这是来自Whosebug的回答

使用 html2canvas 保存图像 - 纯 Javascript

Save image with html2canvas - Pure Javascript

javascript

save

capture

save-as

html2canvas