Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

convert <IMG> to base64 Javascript

I have an image like this

<img id='my_img' src='www.someimage.com'>

And I have created this function to take the IMG node and convert it to a canvas and the base 64 data

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

The function is called like

getBase64Image(document.getElementById("my_img"));

But when I send a image, it just returns an image that is cliped, it only returns the top left corner of the image here is what it returns for this image

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

And this is the image

enter image description here

Why is the image that is returned being clipped?

like image 209
spen123 Avatar asked Sep 27 '22 00:09

spen123


1 Answers

I think that promises are useful in situations like these:

function getBase64Image(url) {
  var promise = new Promise(function(resolve, reject) {

    var img = new Image();
    // To prevent: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
    img.crossOrigin = "Anonymous"; 
    img.onload = function() {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL("image/png");
      resolve(dataURL.replace(/^data:image\/(png|jpg|jpeg|pdf);base64,/, ""));
    };  
    img.src = url;      
  });

  return promise;
};


// CORS (Cross-Origin Resource Sharing) is enabled for Facebook images; but that's not true for 
// all images out there!
var url = "https://scontent.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/12294845_10153267425828951_7985428593018522641_n.jpg?oh=2bb55736fce035311c3d60a1ca559426&oe=57210504";
var promise = getBase64Image(url);

promise.then(function (dataURL) {
  console.log(dataURL);
});

https://jsfiddle.net/5tjov243/2/

Resources:

  • https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
  • https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
like image 112
Martin Vseticka Avatar answered Oct 25 '22 04:10

Martin Vseticka