Как проверить html-эксперименты на холсте на Chrome локально

Question

Я написал простую демо-программу Canvas, но она не дает требуемого результата.Вот мой код: -

    window.onload = function(){
        var canv = document.getElementById('canv');
        var cxt = canv.getContext('2d');
        if(cxt){
            var myimg = document.getElementById('mypic');
            setTimeout(function(){
                cxt.drawImage(myimg,0,0,canv.width,canv.height);
                var edit = cxt.getImageData(0,0,canv.width,canv.height);
                var imgdata =  edit.data;
                for(var i=0;i<imgdata.length;i+=4){
                    imgdata[i] = 255;
                    imgdata[i++] = 255;
                    imgdata[i+3] = 127;
                }
                cxt.putImageData(imgdata,0,0);
            }
            ,100);
            $('<p>Canvas Created</p>').appendTo('body');
        }
    };

Answer 1

Скорее всего, одна из двух вещей идет не так, как надо.

Вы не ждете окончания загрузки изображения, что может быть проблемой.

Или вы работаете в исключительной ситуации безопасности. Вызов getImageData теперь разрешен, если изображение загружено на холст из внешнего источника. Ваш жесткий диск является внешним источником, даже если вы работаете локально. Чтобы проверить, так ли это, я бы предложил отладку в FireFox, потому что его веб-консоль фактически сообщит вам об этой ошибке безопасности.