How to convert array of images in array of base64 in a loopv?

Question

I am having an array of images which are stored on the server and I want base64 data of all the images.

What I have tried:

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);
  return canvas.toDataURL("image/png");
}
var images = ['images/1.png', 'images/2.png', 'images/3.png', 'images/4.png', 'images/5.png'];
for (var i = 0; i < images.length; i++) {
  var img = new Image();
  img.src = images[i];
  img.onload = function() {
    var newData = getBase64Image(img);
    document.body.innerHTML += "<img src='" + newData + "'>";
  }
}

I know as the onload event is getting fired later once image is loaded but could not figure out the solution.

can you tell us something more about what exactly you are doing?i think there could be a simpler solution to what you are doing.plz add some more info about what you are trying to do here. — HIRA THAKUR
– HIRA THAKUR, Commented Feb 3, 2014 at 14:00
@time-to-leave-earth, I have some images on my server uploaded by user and i want to extract BASE64 data of those images. Writin that data in DOM is just to confirm valid bse64 data. — Rayon
– Rayon, Commented Feb 5, 2014 at 11:33

Sergey Semenov · Accepted Answer · 2014-02-03 14:01:33Z

1

Take a look at 3 points (had a lot of headache few months ago with img.onload):

first to be sure that onload will work You should set the src to an image after the event is assigned
second - you'll have to add the random get parameter to image path. something like

img.src = images[i] + '?' + Date.now();
and third - if this will not help, try to insert the original image to the browser (to be sure browser will load it)

answered Feb 3, 2014 at 14:01

Sergey Semenov

3692 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rayon Over a year ago

I know I can insert original image to browser but All i want is base 64 data of image not the original image...

Sergey Semenov Over a year ago

Yeah, I've understood. But sometimes You'll need to add original img on a document to be sure that event onload will be fired

Rayon · Accepted Answer · 2016-05-23 06:41:53Z

As the onload event is synchronous(handler is invoked once image is loaded/cached) in nature, need to use closure to access current(in a loop) image.

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);
  return canvas.toDataURL("image/png");
}
var images = ['images/1.png', 'images/2.png', 'images/3.png', 'images/4.png', 'images/5.png'];
var tpArray = [];
for (var i = 0; i < images.length; i++) {
  var img = new Image();
  (function(img) {
    img.onload = function() {
      document.body.innerHTML += '<img src="' + getBase64Image(img) + '">';
    };
  })(img);
  img.src = images[i];
}

If order of the images in array is to be maintained, a callback will be required in onload-handler which will make sure that next index from array will be accessed once current images is processed.

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);
  return canvas.toDataURL("image/png");
}
var images = ['images/1.png', 'images/2.png', 'images/3.png', 'images/4.png', 'images/5.png'];

function getBaseInOrder(array, callback) {
  var index = 0;
  var resArr = [];
  var getBaseOfImg = function(imgSrc) {
    var img = new Image();
    img.src = imgSrc;
    img.onload = (function(img) {
      return function() {
        var newData = getBase64Image(img);
        document.body.innerHTML += "<img src='" + newData + "' data-src='" + img.src + "'>";
        resArr.push(newData);
        ++index;
        if (index == array.length) {
          callback(resArr);
        } else {
          getBaseOfImg(array[index]);
        }
      }
    })(img);
  };
  getBaseOfImg(array[index]);
}
getBaseInOrder(images, function(baseData) {
  console.log(baseData);
});

Collectives™ on Stack Overflow

How to convert array of images in array of base64 in a loopv?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related