从图像转换 Base64 没有得到 base64 字符串答案

【问题标题】：Base64 convert from image not getting base64 string从图像转换 Base64 没有得到 base64 字符串
【发布时间】：2016-07-15 09:41:18
【问题描述】：

我正在使用以下代码将图像转换为 base64 字符串

  function getBase64Image() {
    p = document.getElementById("fileUpload").value;
    img1.setAttribute('src', p);
    canvas.width = img1.width;
    canvas.height = img1.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img1, 0, 0);
    var dataURL = canvas.toDataURL("image/jpg");

    $("#b64").val(dataURL);
}

但是我在 dataURL 中得到的是 Data; 并且没有包含 base64 字符串。

如何从图片中获取 base64 字符串？

【问题讨论】：

你要先看图！！
@Pradeep 怎么办？
CanvasContext2D drawImage() issue [onload and CORS]的可能重复

标签： javascript html canvas base64

【解决方案1】：

我认为如果您使用加载回调，这可能会起作用，因为加载是异步的。不确定您的 fileUpload 是什么，但如果是粘贴 url 的文本字段

function getBase64Image() {
    p = document.getElementById("fileUpload").value;
    img1.setAttribute('src', p);
    img1.setAttribute('load', fileLoaded);  
    function fileLoaded(e) {
      canvas.width = img1.width;
      canvas.height = img1.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img1, 0, 0);
      var dataURL = canvas.toDataURL("image/jpeg");
      $("#b64").val(dataURL);
    }
}

图像类型也是 image/jpeg。 jpg 将不起作用，或者它将返回 png，因为它无效。并且跨域可能是个问题 iirc。

【讨论】：

永远不要使用setAttribute 来附加事件监听器。在某些情况下，您可以使用它的onload 属性，但最好的方法是使用Element.addEventListener 方法。使用setAttribute 会将属性设置为handler.toString() 的结果，您将丢失所有作用域变量，我什至不确定事件是否会触发...

【解决方案2】：

这是一个简单的例子：

// assuming that you have jQuery lib

$('#fileUpload').on('change', function(e) {
  if (this.files.length === 0) return;

  var imageFile = this.files[0];
  var reader = new FileReader();

    // when reading of image file completes
  reader.onloadend = function() {
    var tempImg = new Image();
    tempImg.src = reader.result;

        // when image is loaded
    tempImg.onload = function() {
      canvas.getContext("2d").drawImage(tempImg, 0, 0);
    }

  }

  // start reading
  reader.readAsDataURL(imageFile);
});

希望这会有所帮助！

【讨论】：