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

10 浏览
0 Comments

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

可能重复：

在画布上绘制来自数据URL的图像

这是JavaScript代码...

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

上述代码将图像对象的源设置为服务器基目录中图像文件的位置。

我的问题是：

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

例如：datauri字符串 =

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

如果我将编码字符串设置为原样：

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

它不起作用。

0

1 答案

0 Comments

(How to set the source of an image to a base64-encoded data uri?)这个问题的出现的原因以及解决方法。

问题的出现原因：

- 图片太大，可能导致加载问题。

- 需要将图片编码为base64格式。

解决方法：

- 考虑使用Blob构造函数来代替，这样可以更容易地通过AJAX加载图片，而且不需要将其内联。

- 不需要对任何内容进行base64编码。

使用Blob构造函数的示例代码如下：


var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/image.jpg', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = new Blob([this.response], {type: 'image/jpeg'});
    var url = URL.createObjectURL(blob);
    var img = document.createElement('img');
    img.onload = function(e) {
      window.URL.revokeObjectURL(img.src);
    };
    img.src = url;
    document.body.appendChild(img);
  }
};
xhr.send();

这样就可以通过AJAX加载图片，并在页面中显示出来，而不需要将其编码为base64格式。

0