如何將畫布圖像“data：image / jpeg; base64，..”轉換為普通圖像文件--javascript

Question

我有

image = canvas.toDataURL("image/png", 1);

但這又回來了

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA.......

但我需要像src="myimage.png"這樣的正常圖像

我如何從畫布中獲取它？ 我google了很多，似乎找不到我需要的東西......

Answer 1

您獲得的字符串可以用作圖像的源屬性，您只需創建一個可以為其分配的新Image元素：

var image = new Image();
image.src = canvas.toDataURL("image/png", 1);
// append image to DOM

編輯 ：鑒於評論，您希望將其轉換為存儲在數據庫中的內容。 你應該POST的結果toDataURL到您的服務器。 使用服務器端技術的IO /圖像/圖形庫來解碼數據字符串的base64編碼部分，並將其寫入新文件。 您現在可以將該路徑存儲在數據庫中。

替代方法：只將整個數據字符串存儲在數據庫中。 然后，當您渲染<img>標記時，您只需將其轉儲到src屬性中：

<img src="<< base-64 encoded data string>>" />