Base64 data from absolute image path

Question

I am trying to get base64 data from image url but it always return "data:"

Here's the code :

function getBase64Image(imgurl) {
  var canvas = document.createElement("canvas");
  var img = new Image();
  img.src = imgurl;
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  console.log(dataURL);
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

score 0 · Answer 1 · edited Oct 05 '15 at 13:04

0

Use img.onload to execute the code after your image has loaded. Use a callback function to report back the dataURL.

function getBase64Image(imgurl, callback) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL("image/png");
      dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
      if (typeof callback === 'function') {
        callback(dataUrl);
      }
  };
  img.src = imgurl;
}

edited Oct 05 '15 at 13:04

Rayon

36,219
4
49
76

answered Oct 05 '15 at 12:57

Ke Vin

2,004
1
18
28

You can not get `img.width` before image is loaded! – Rayon Oct 05 '15 at 12:58
`img.src` should be placed after `onload` callback. Refer [this](http://stackoverflow.com/questions/14648598/is-it-necessary-to-set-onload-function-before-setting-src-for-an-image-object) – Rayon Oct 05 '15 at 13:00
SecurityError: The operation is insecure. – Oct 05 '15 at 13:03
@MohitBumb, Your image must be hosted under the same Domain! – Rayon Oct 05 '15 at 13:03
its coming from Amazon S3 – Oct 05 '15 at 13:06

Base64 data from absolute image path

1 Answers1