使用html2canvas保存圖像-純Javascript

Question

我正在嘗試創建一個按鈕來捕獲我的頁面並將其保存為png。

現在，我可以使用所需的分辨率來復制它，但無需顯示它，而是需要顯示一個對話框並將其保存為“另存為...”，以重命名該文件。

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

這是來自stackoverflow的答案如何使用HTML2canvas將img保存到用戶的本地計算機