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

Question

  

可能重复：
  Drawing an image from a data URL to a canvas

这是JavaScript代码......

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

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

如何将Image Object源设置为base64编码的字符串或DataURI字符串？

示例：datauri string =

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

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

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

它不起作用。

Answer 1

请考虑使用Blob constructor。这样，通过AJAX加载图像更容易，而且你不需要内联，这可能是问题（也许它太大了？）。而且你不需要对任何东西进行base64编码。