Холст не загружается в Firefox

0

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

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

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

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

Я не получаю никаких ошибок в firefox. На самом деле, я даже не могу его отладить.

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

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

  • 0
    Что вы имеете в виду, вы не можете отладить это? Что происходит, когда вы пытаетесь?
  • 0
    Не могли бы вы создать jsfiddle.net и / или добавить код, который вы используете для вызова этой функции.
Показать ещё 3 комментария
Теги:
canvas

2 ответа

2
Лучший ответ

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

ReferenceError: событие не определено. Попробуйте обработать событие

Вам лучше обработать событие, используя:

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

Затем в вашем обработчике вы можете использовать

function LoadImage(event) {

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

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

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

Модифицированная скрипка здесь

Поделиться
  • 0
    Очень мило, сэр. Спасибо за вашу помощь. Кроме того, спасибо за других, которые помогли привести к этому ответу. Я не представлял себе этот обходной путь раньше: D
  • 0
    @VicWolk нет проблем! Мы здесь, чтобы помочь :)
2

Эта строка:

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

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

Поделиться
  • 0
    А ну понятно. Это не дает мне ничего на Firefox. Я просто положил его туда, и он работал на Chrome, а затем на IE. Что нужно сделать, чтобы он работал на ff?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню