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