Изображение холста не отображается в Chrome (работает в FF4 и IE9)

Question

Я в тупике.По жизни я понятия не имею, почему это не работает в Chrome.Вы можете увидеть код здесь:

http://jsfiddle.net/corydorning/NgXSH/

Когда я поднимаю этот код в FF или IE9, он прекрасно работает.Вы заметите, что скрипта будет работать в Chrome с визуализированным элементом, но она НЕ работает вне скрипки.

Любая помощь очень ценится.Это моя первая попытка с холстом.

Answer 1

Проблема в том, что вы не ожидаете загрузки исходного элемента изображения.Если вы немного измените его, он будет работать нормально:

  $(function() {
    var canvas = document.createElement('canvas'),
    canvasExists = !!(canvas.getContext && canvas.getContext('2d')),
    oImage = $('img')[0];

    if (canvasExists) {
      var context = canvas.getContext('2d'), img = new Image();

      img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;

        $(oImage).replaceWith(canvas);

        context.drawImage(oImage, 0, 0);
      }

      img.src = oImage.src; 
    } else {
      // apply MS filters
    }

Answer 2

Может быть трудно использовать img.onload, если у вас их много. В Chrome проще всего дождаться загрузки изображения:

$(window).load(function () {

вместо

$(document).ready(function () { 

as $ (window) .load фактически ожидает загрузки всего изображения.

Идеально подходит для использования изображения на холсте. (работают также в firefow и IE)