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

Question

I am convertin image to base64 string using following code

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

But what I am getting in dataURL is Data; and there is not base64 string contained.

How can I fetch base64 string from image?

Answer 1

Here's a simple example:

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

Hope this helps!!

Answer 2

i think this could work if you use load callback because the loading is async. not sure what your fileUpload is tho, but if's a text field pasting a 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);
    }
}

the image type is also image/jpeg. jpg won't work or, it will return png instead since it isn't valid. and cross-origin can be a problem iirc.