javascript - 更改图像的 URL

Question

我有一个 Canvas ，我正在上面画一些东西，然后我想将该画保存到图像中。我成功地做到了这一点，但我得到的图像路径很奇怪，比如 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;
}

Answer 1

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

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

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

这是使用 native 方法从 Canvas 获取图像的唯一方法。

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

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

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