使用html2canvas保存图像 - 纯Javascript

时间:2017-06-03 12:29:07

标签: javascript save capture html2canvas 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

1 个答案:

答案 0 :(得分: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();
}

这是来自stackoverflow How to save img to user's local computer using HTML2canvas

的答案