如何将图像的源设置为 base64 编码的数据 uri？ [复制]答案

【问题标题】：How to set the source of an image to a base64-encoded data uri? [duplicate]如何将图像的源设置为 base64 编码的数据 uri？ [复制]
【发布时间】：2014-07-22 14:27:07
【问题描述】：

可能重复：
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对象源设置为服务器基目录中图像文件的位置。我的问题是：-

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

示例：datauri 字符串 =

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

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

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

它不起作用。

【问题讨论】：

你能澄清“不起作用”吗？您针对哪些浏览器进行了测试？
img.src = 'data:image/jpeg;base64,...' 方法肯定有效 codepen.io/thebabydino/pen/BoEuH 也许你应该检查 DataURI 字符串。我过去犯过的错误包括在结尾处复制粘贴奇怪的字符、选择并复制粘贴其中的一部分或将变量名写错。
我已经针对 Firefox 浏览器版本 14.01 进行了测试

标签： javascript image html base64

【解决方案1】：

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

【讨论】：