更改图片的 URL答案

【问题标题】：Changing Url of an Image更改图片的 URL
【发布时间】：2014-04-28 21:29:32
【问题描述】：

我有一个画布，我正在画一些东西，然后我想将该画保存到图像中。我成功地做到了，但是我得到的图像路径很奇怪，就像 data32... 是否可以将该 url 转换为人类可读的 url？

function convertCanvasToImage(canvas) {
    var image = document.getElementById("postcar_image");
    image.src = canvas.toDataURL("image/png"); // here I am getting an encoded string of the image, what I want is to decode it on client side
    return image;
}

【问题讨论】：

How To Save Canvas As An Image With canvas.toDataURL()? 的可能重复项
这实际上可能无法回答，但您的问题并不清楚。你现在在干什么？结果是什么？ “人类可读的 url” 是什么意思？
例如，当我使用 canvas.toDataURL() 时，我会得到类似这样的数据：image/png;base64...
@Liam 我猜他的意思是如果他可以在用户即将下载图像时更改图像的名称
是的，可以做到，但您还需要服务器端脚本。您应该将该 data32 图像发送到服务器，存储它，然后发回 url。如果您只在前端工作，我担心您会被该图像文件名所困扰。除非你只关心下载图片的人的文件名，否则你可以使用下载属性stackoverflow.com/questions/10049259/…

标签： javascript html image-processing canvas

【解决方案1】：

返回的字符串是所谓的data-URI scheme。它确实包含编码为 base-64 的图像，并带有一个标头 (data:...)，可以将其用作图像 src 的 uri 等等。该字符串是人类可读的 URL，您可以获得二进制数据。

您可以直接将该 data-uri 作为图像源传递（您也可以将该字符串粘贴到地址栏中进行测试）：

var myImage = new Image;
myImage.src = canvas.toDataURL();

这是使用本机方法从画布获取图像的唯一方法。

如果您想隔离二进制数据，您可以切断该 uri 的标头以获取图像数据本身 - 任何之后 ..base64, 是图像文件本身编码为 base-64 .

虽然你需要manually decode the base-64 data，但原始图像文件数据本身并不是那么有用，虽然你可以load the data back as a Blob，但这在这种情况下毫无意义.

具有 data-uri 的要点是能够使用 JavaScript 处理二进制图像以及与服务器通信而不会遇到编码问题，因为所有数据都在（人类）可读的 ASCII 范围内。

【讨论】：