如何在loopv中的base64数组中转换图像数组？

Question

我有一个存储在服务器上的图像array ，我想要所有图像的base64数据。

我尝试过的

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 + "'>";
  }
}

我知道onload事件稍后会在图像加载后触发，但无法找出解决方案。

Answer 1

看一下3点（几个月前使用img.onload令人头疼）：

• 首先要确保onload可以工作。在分配事件后，应将src设置为图像

• 第二-您必须将random get参数添加到图像路径。 就像是

  img.src =图片[i] +'？' + Date.now（）;

• 第三点-如果这样做无济于事，请尝试将原始图像插入浏览器（以确保浏览器会加载它）

Answer 2

由于onload事件本质上是同步的（ 一旦图像被加载/缓存，就会调用处理程序 ），因此需要使用closure来访问current(in a loop)图像。

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

如果要保持阵列中图像的顺序，则在onload-handler中将需要callback ，以确保一旦处理了当前图像，就将访问阵列中的下一个index 。

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