javascript - 绘制操作后通过 toDataURL 复制 Canvas 不起作用

Question

我正在尝试使用以下代码将一个 Canvas 的内容复制到另一个 Canvas :

generateThumbnail: function(i) {
  var thumbnailImage = new Image();
  thumbnailImage.src = $("canvas")[i].toDataURL();

  var thumbnailCanvas = $("#thumbnail")[0];
  var ctx = thumbnailCanvas.getContext("2d");

  ctx.drawImage(thumbnailImage, 0, 0);
}

它可以工作，但如果我刚刚完成绘图操作(例如线条填充)，则不行。 如果我刚刚完成绘制操作，则第一次执行时它不会执行任何操作，但如果我第二次调用它，它就会起作用。这看起来很奇怪，我不确定为什么会发生这种情况。

就好像 Canvas 处于某种无效状态，无法读取它或其他东西。

绘制这条线的代码在这里:

eraseLine: function(o) {
  var c = this.context;
  var lineWidth = o.radius * 2;

  // Stroke Line

  if (this.stroke) {
    c.lineWidth = lineWidth + 4;
    c.globalCompositeOperation = 'source-atop';
    c.strokeStyle = this.strokeColor;

    c.beginPath();
    c.moveTo(o.x0, o.y0);
    c.lineTo(o.x1, o.y1);
    c.stroke();
  }

  // Erase Line

  c.lineWidth = lineWidth;
  c.lineCap = 'round';
  c.strokeStyle = 'rgba(255, 255, 255, 1)';
  c.globalCompositeOperation = 'destination-out';

  c.beginPath();
  c.moveTo(o.x0, o.y0);
  c.lineTo(o.x1, o.y1);
  c.stroke();

  c.globalCompositeOperation = 'source-over';
}

我已经在 Chrome 11 和 Firefox 5 上测试了这一点，并且在这两种浏览器上都会发生这种情况。有什么想法为什么会发生这种情况吗？

Answer 1

你能试试这个吗？

generateThumbnail: function(i) {
  var thumbnailImage = new Image();

  thumbnailImage.onload = function() {
    var thumbnailCanvas = $("#thumbnail")[0];
    var ctx = thumbnailCanvas.getContext("2d");

    ctx.drawImage(thumbnailImage, 0, 0);
  }

  thumbnailImage.src = $("canvas")[i].toDataURL();  
}

执行绘图操作后，该图像的加载似乎需要更长的时间。因此，当您执行drawImage命令时，图像并未加载。第二次调用此函数时，图像加载速度似乎更快。无论如何，当您加载图像时，您应该始终使用 onload 事件。