toDataURL圖片下載沒有擴展名

Question

我下載的圖像時，一個div通過使用點擊...

document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

這是工作，但該下載沒有擴展名，並就被稱爲「下載」

圖像

我已經嘗試設置這樣的名字......

document.location.download = "myfile.jpg"; 
document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

但它有沒有影響，我在哪裏去了？

Answer 1

download屬性不是Location對象的一部分，因爲document.location成立，僅適用於HTML定位點（A）標記（除IE外）。

根據瀏覽器和版本的不同，您可以嘗試將畫布轉換爲Blob對象，然後轉換爲File以設置文件名，並通過URL.createObjectURL()將其作爲URL提供。此外，在IE中不支持toBlob()（但您可以使用polyfilltoBlob()，並使用msSaveBlob代替）。

（你也想以 「應用」 爲MIME類型（例如， 「應用程序/八位字節流」），以取代MIME類型的 「圖像」。）

c.toBlob(function(blob) { 
 
    var file = new File([blob], "test.png", {type: "application/octet-stream"}); 
 
    document.location.href = URL.createObjectURL(file); 
 
})

A save request with PNG and filename should appear when running this code... 
 
<canvas id=c></canvas>

或者，請嘗試FileSaver.js library，它處理許多特殊情況。