Canvas not loading on Firefox

Question

Что не так с этой функцией?

window.LoadImage = function(el, canvasId){ 
      var canvas = document.getElementById(canvasId); 
      var context = canvas.getContext("2d"); 
      var dialogCanvas = document.getElementsByClassName('dialogCanvas'); 
      var dialogContext = dialogCanvas[0].getContext("2d"); 
      var reader = new FileReader(); 
      reader.onload = function(event){ 
       var img = new Image(); 
       img.onload = function(){ 
        var w = 545; 
        var imgW = img.width; 
        var imgH = img.height; 
        var dialogW = dialogCanvas[0].width; 
        var dialogH = dialogCanvas[0].height; 

        h = (imgH/imgW) * w; 
        dialogH = (imgH/imgW) * dialogW; 

        context.clearRect(0, 0, w, imgH); 
        dialogContext.clearRect(0,0, dialogW, 250); 
        canvas.width = w; 
        canvas. height = h; 
        context.drawImage(img,0,0,w,h); 
        dialogContext.drawImage(img,0,0,dialogW, dialogH); 

       } 
      img.src = event.target.result; 

      } 
      reader.readAsDataURL(event.target.files[0]); 
     } 

Я пытаюсь нарисовать 2 разных холста с помощью этой функции. Ни одна из них не работает в Firefox. И чертовски работает на Chrome и IE.

«dialogCanvas» - это предварительный просмотр, который находится внутри блока jquery modal, а другой, достигнутый с использованием параметра «canvasId», имеет значение display = "none", на странице.

У меня нет ошибок в firefox. На самом деле, я даже не могу его отладить.

Заранее спасибо.

Редактировать jsfiddle = http://jsfiddle.net/cgEv8/

Answer 1

Как уже указывалось, событие не определено. В Firefox я получаю эту ошибку на скрипке:

ReferenceError: event is not defined. Try to handle event

Вы должны достаточно обработать событие, используя:

$('#t1-1-img-header').on('change', LoadImage); 

Тогда в вас обработчика вы можете использовать

function LoadImage(event) { 

    var el = this; /// this will be the calling element 
    ... 
} 

(и, конечно, вам нужно удалить атрибут onchange в самом элементе).

Для идентификатора холста необходимо либо передать его напрямую, либо использовать другие средства для его хранения, чтобы он был доступен для области обратного вызова.

Modified fiddle here

Answer 2

Эта линия:

 reader.readAsDataURL(event.target.files[0]); 

относится к "событие". Где это? В некоторых браузерах это глобальный объект, но не в Firefox.