javascript - 如何让用户上传的图片转换为Base64

Question

我已经制作了一个简单的日志系统，我从文本字符串中获取 Base64 代码:

var myString = 'Hello everyone, my name is Dennis';
var b64 = btoa(myString);
var unicode = atob(b64);
console.log(b64);
console.log(unicode);

如我所说，输出是一个 Base64 代码，但我想做的是将上传的图像转换为 Base64。这是我到目前为止得到的，我从中得到的输出是 base64 代码中的整个网页。我希望有人能帮助我。

function toDataUrl(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.send();
}



//use

var captcha = document.getElementById('logo').src;
toDataUrl(captcha, function(base64Img) {
    log(captcha);
});

提前致谢!

Answer 1

如果重复对您没有帮助，我为您提供了一个工作示例: (如果您的图像未在请求的同一域中使用，请注意 CORS)

function toDataUrl(src, callback) {
  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();
    callback(dataURL);
  };
  img.src = src;

}

toDataUrl("http://i.imgur.com/rx3kylA.png", function(base64Img) {
  console.log(base64Img);
});