如何在Javascript中将DataUrl转换回png图像文件答案

【问题标题】：How to convert DataUrl back into png image file in Javascript如何在Javascript中将DataUrl转换回png图像文件
【发布时间】：2020-11-12 10:27:59
【问题描述】：

我的原图为png file，如下：

<img src="originalimage.png" >

一旦我使用第三方注释库修改了原始图像，例如在原始图像上简单的铅笔画，它会给我一个dataurl，它将我的src 替换为修改后的图片。像这样：

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

一切正常，我可以查看修改后的图像。但是，我想将给定的 dataurl 转换回png file，就像上面的一样。像这样：

  <img src="modifiedImage.png">

如何在不使用任何在线转换器的情况下将 dataurl 中的 Javascript 转换回我的 png file 并应用修改？

【问题讨论】：

这能回答你的问题吗？ convert base64 to image in javascript/jquery
如果你试图覆盖旧文件，你不能。您可以下载一个新文件（您可以将其保存在原始文件之上）。
“将其转换回 png”是什么意思？您正在展示将一个实际文件（以 data-uri 编码）转换为该文件的 filename，我想不出你为什么会这样做的一个原因。所以：你能解释一下为什么你认为你需要这样做吗？或者您认为您正在做的事情需要您这样做？

【解决方案1】：

您可以使用 (,) 逗号和 (;) 半列拆分图像 src 属性，以获取基本编码字符串。

然后将其写入文件系统。

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

【讨论】：