从url将图像转换为base64

Question

我有一个图片网址，我需要将其转换为base 64

我正在尝试使用图像onload但是我没有在base64中获取它

var url = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png";

var image = new Image();
image.onload = function(e) {
  console.log("herE", e);
};
image.src = url;

以下是Demo

Answer 1

你尝试使用FileReader Api ??

function base64FromUrl(url){
    return new Promise(function(resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function() {
        var reader  = new FileReader();
        reader.onloadend = function () {
            resolve(reader.result);
        }
        reader.readAsDataURL(xhr.response);
      };
      xhr.open('GET', url);
      xhr.send();
    });
}

base64FromUrl("http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png")
  .then(function(res) { document.write(res); })

Answer 2

• 创建canvas元素
• 在画布上绘制图像
• 使用HTMLCanvasElement.toDataURL()，返回包含data URI
表示的image

var url = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png";

var image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function(e) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(image, 0, 0, image.width, image.height);
  console.log(canvas.toDataURL());
};
image.src = url;