javascript - 如何将图像的源设置为 base64 编码的数据 uri？

Question

可能重复：
将图像从数据 URL 绘制到画布

这是 JavaScript 代码...

var imageObj = new Image();
var context = this.canvas.getContext("2d"); 
imageObj.onload = function() {
     context.drawImage(imageObj, 69, 50);
};
imageObj.src = "blackhat.jpg"

上面的代码是将 Image 对象源设置为服务器基目录中图像文件的位置。我的问题是：-

如何将图像对象源设置为 base64 编码字符串或 DataURI 字符串？

示例：datauri 字符串 =

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADs.....................

如果我按原样设置编码字符串：-

imageObj.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADs....................."

它不起作用。

Answer 1

请考虑改用Blob 构造函数。这样，通过 AJAX 加载图像更容易，并且不需要内联，这可能是这里的问题（也许它太大了？）。而且您不需要对任何内容进行 base64 编码。