Question

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

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 的图片，其标题（data:...）允许将其用作图像src的uri，因此上。该字符串是人类可读的URL，因为您可以获取二进制数据。

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

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

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

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

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

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

更改图像的URL

1 个答案: