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

#html #google-chrome #canvas

#HTML #google-chrome #холст

Вопрос:

Я написал простую демонстрационную программу 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');
        }
    };

1. Попробуйте вывести сообщение журнала, чтобы узнать, имеет ли значение ctx значение null или нет.

2. Кроме того, вы, вероятно, получаете ошибку безопасности DOM. Вы должны запустить его с веб-сервера (даже если он просто запущен python -m SimpleHTTPServer )

3. вы можете использовать jsfiddle.net для проведения тестов

4. в качестве альтернативы вы можете загрузить виртуальную машину с запущенным веб-сервером (debian apache или аналогичный), присвоить виртуальной машине адрес в вашей локальной сети, а затем протестировать этот способ. это позволит избежать любых ошибок, возникающих при получении страниц с вашего собственного компьютера.

5. @Maz: да, вы правы, я получаю ошибку безопасности DOM. Но есть ли какие-либо обходные пути для тестирования локальных файлов? Кроме того, я поместил этот файл на свой локальный сервер apache, работающий на том же ноутбуке, но по-прежнему не получаю требуемого результата

Ответ №1:

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

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

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

1. Я сталкиваюсь с исключением безопасности. И я попробовал это в Opera, firefox и Chrome, но все три дают одинаковый результат, т.Е. рисуют неизмененное изображение на холсте.

2. Единственный обходной путь, который у вас есть для тестирования локальных файлов, — это запустить простой веб-сервер. Это боль, которую я знаю. Вы можете попробовать запустить Chrome с флагом: C:UsersrootAppDataLocalGoogleChromeApplicationchrome.exe —разрешить доступ к файлам из файлов

3. Я думаю, что Саймон здесь прав. Если вы просматриваете страницу в своей локальной файловой системе, вы столкнетесь с той же проблемой происхождения, аналогичной XHR в локальной файловой системе. Chrome не хочет, чтобы локально загруженная страница имела какой-либо реальный доступ к другим файлам, иначе она может отправить локальный файл на сервер. —разрешить доступ к файлам из файлов устранит эту проверку, но подвергнет вашу систему риску. Лучше всего использовать локальный сервер.