如何将画布图像“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>>" />