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设置为图像
第二 - 您必须将随机get参数添加到图像路径。
之类的东西
img.src = images [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];
}

如果要维护数组中图像的顺序，callback中将需要onload-handler，这将确保在当前图像为时，将访问数组中的下一个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);
});

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

2 个答案: