Base64 从图像转换未获取 base64 字符串

Question

我正在使用以下代码将图像转换为 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 字符串？

Answer 1

这是一个简单的例子：

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

希望对您有所帮助！！

Answer 2

我认为如果您使用加载回调，这可能会起作用，因为加载是异步的。不确定你的 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 将不起作用，或者它将 return png 代替，因为它无效。并且跨源可能是个问题 iirc.

Base64 从图像转换未获取 base64 字符串

Base64 convert from image not getting base64 string

html

javascript

base64

canvas