如何在 Javascript 中將 DataUrl 轉換回 png 圖像文件

Question

我的原始圖像為png file ，如下所示：

<img src="originalimage.png" >

一旦我使用第三方注釋庫修改了原始圖像，例如在原始圖像上簡單的鉛筆畫，它會給我一個dataurl ，用修改后的圖片替換我的src 。 像這樣：

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

一切正常，我可以查看修改后的圖像。 但是，我想將給定的 dataurl 轉換回上面的png file 。 像這樣：

  <img src="modifiedImage.png">

如何在不使用任何在線轉換器的情況下將Javascript中的這個dataurl轉換回我的png file並應用修改？

Answer 1

您可以使用 (,) 逗號和 (;) 半列拆分圖像 src 屬性以獲取基本編碼字符串。

然后將其寫入文件系統。

file_put_contents "../somedir/test.png", base64_decode($baseEncodedString));