html2canvas使用擴展名保存畫布圖像

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>標記，則應該能夠使用download屬性。

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

我自己並沒有玩太多，但是據說它可以在Firefox，Chrome和Edge中使用： https : //caniuse.com/#feat=download