Question

我正在尝试从网址对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这样的响应（它在屏幕截图中完成了两次）它没有返回任何内容：

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

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

更新

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

Answer 1

方法：画布

将图像加载到Image-Object中，将其绘制到非污染画布并将画布转换回dataURL。

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)
});

Answer 2

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

尝试在onload()函数到达结束时更改代码以调用回调，并使用该回调进行警报。类似的东西：

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

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

        callback(response);
    }
}

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

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

2 个答案: