Question

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

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

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

就好像画布处于某种无效状态，无法读取或无法读取。

绘制线的代码在这里：

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事件。

在绘制操作后通过toDataURL复制画布不起作用

1 个答案: