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是什么，但如果是一个粘贴网址的文本字段

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，因为它无效。和交叉起源可能是一个问题。

Base64转换自图像没有获得base64字符串

2 个答案: