Base64 编码图像警报正确，响应为零

Question

我正在尝试对来自 URL 的图像进行 Base64 编码。

function getBase64Image(url) {
  var img = new Image(),
      response = '';

  img.setAttribute('crossOrigin', 'anonymous');
  img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0);

    var dataURL = canvas.toDataURL('image/png');
    response = dataURL;
    alert(response);
  };

  img.src = url;
  return response;
}

alert() 工作正常但响应为零：

如果我 log 这样的响应（在屏幕截图中完成了两次），您可以在屏幕截图的控制台中看到它 returns 什么都没有：

console.log(getBase64Image('<%= asset_path "test.jpg" %>'));

显然我们可以读取图像，因为警报具有编码。我错过了什么？

更新

相关 JSFiddle：https://jsfiddle.net/guxzxq20/3/

Answer 1

我相信您返回的是您创建的空 response 对象，因为 onLoad() 函数内的 response 对象未访问外部 response。

尝试将您的代码更改为在 onload() 函数结束时调用回调，并使用该回调进行提醒。类似于：

function getBase(url, callback) {
    // ... code

    img.onload = function () {
        // ... code

        callback(response);
    }
}

这是一个非常原始的例子。

Answer 2

方法：Canvas

将图像加载到图像对象中，将其绘制为未受污染的 canvas 并将 canvas 转换回数据 URL。

function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}

调用方法

convertImgToDataURLviaCanvas('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png',function(response){
 alert(response)
});

Base64 编码图像警报正确，响应为零

Base64 encoding an image alerts correct, response is nil

javascript

pdfmake