Копирование холста через toDataURL после операции рисования не работает

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 при загрузке изображения.