HTML5 畫布轉換為 PNG 檔案

要將 HTML5 畫布轉換為 PNG，請按照以下步驟操作 -

你需要將生成的資料 URL 新增到 <a> 標記的 href 屬性中。

用於 base64 影像的對話方塊 -

<img src="data:image/png;base64,iOBVRw0KGgoAAAANSUhEUg...." class="image" />

新增一個檔名 -

<a download="newimg.png" href="...">

現在定義HTTP **頭** -

headers=Content-Disposition: attachment; filename=newimg.png

為了處理 Web 瀏覽器的 RAM 並減少其利用 -

// generated the data URL dynamically
function myCanvas() {
   var d = canvas.toDataURL('image/png');
   this.href = d;
};
d.addEventListener('click', myCanvas, false);

丹尼爾·托馬斯

更新於: 20-6-2020

685 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始