图像加载前 toDataUrl 触发答案

【问题标题】：toDataUrl trigger before images load图像加载前 toDataUrl 触发
【发布时间】：2016-01-20 21:43:51
【问题描述】：

我正在尝试创建画布绘图，但是当我使用 toDataUrl 时，它返回空的画布文件。

这可能是因为 toDataUrl 在我的图像加载之前触发了，所以我该如何更改它，以便我尝试加载的图像是画布文件的一部分。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.addEventListener("load", function() {
    ctx.drawImage(img, 0, 0, 800, 420);
}, false);
img.src = "images/quizes/sim.png";

var img1 = new Image();
img.addEventListener("load", function() {
    ctx.drawImage(img1, 0, 0, 320, 320);
}, false);
ctx.drawImage(img1, 0, 0, 320, 320);
img1.src = "images/users/alfred.jpg";

var img2 = new Image();
img.addEventListener("load", function() {
    ctx.drawImage(img2, 480, 0, 320, 320);
}, false);
img2.src = "images/users/brynjar.jpg";

var dataURL = canvas.toDataURL();

$.ajax({
    type: "POST",
    url: "script.php",
    data: {
        imgBase64: dataURL
    }
}).done(function(o) {
    console.log('saved');
});

【问题讨论】：

你需要等待所有图片加载完毕。
要么使用计数器。图片加载，向上计数器，看看是否全部加载。如果是，请致电下一步或查看承诺。
@epascarello 的评论你看懂了吗？

标签： javascript html canvas

【解决方案1】：

使用 Promises（大多数 IE 不支持）

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function loadImage(image, x, y, width, height) {
  return new Promise(function(resolve, reject) {

    var img = new Image();
    img.onload = function() {
      ctx.drawImage(img, x, y, width, height);
      resolve(image);
    };
    img.onerror = reject;
    img.src = image;
    if (img.complete) img.onload();
  });
}


var img1 = loadImage("images/quizes/sim.png", 0, 0, 800, 420);
var img2 = loadImage("images/users/alfred.jpg", 0, 0, 320, 320);
var img3 = loadImage("images/users/brynjar.jpg", 480, 0, 320, 320);    

Promise.all([img1, img2, img3]).then(function(value) {

  console.log(value);
  var dataURL = canvas.toDataURL();

  $.ajax({
    type: "POST",
    url: "script.php",
    data: {
      imgBase64: dataURL
    }
  }).done(function(o) {
    console.log('saved');
  });
}, function(reason) {
  console.error(reason);
});

如果您需要 IE，可以使用 PollyFills 重新创建支持。其他选择是使用计数器。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function loadImage(image, x, y, width, height) {

  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, x, y, width, height);
    count++;
    if (count === totalCount) {
      allLoaded();
    }
  };
  img.onerror = function() {
    alert("You have a problem");
  };
  img.src = image;
  if (img.complete) img.onload();

}


function allLoaded() {
  var dataURL = canvas.toDataURL();

  $.ajax({
    type: "POST",
    url: "script.php",
    data: {
      imgBase64: dataURL
    }
  }).done(function(o) {
    console.log('saved');
  });
}

var count = 0;
var totalCount = 3;
var img1 = loadImage("images/quizes/sim.png", 0, 0, 800, 420);
var img2 = loadImage("images/users/alfred.jpg", 0, 0, 320, 320);
var img3 = loadImage("images/users/brynjar.jpg", 480, 0, 320, 320);

【讨论】：