2015-05-15 23 views
1

Я пишу небольшую демонстрационную программу для проверки холста + производительности. Но getImageData(), putImageData(), похоже, не работают. Он оставляет черный квадрат на холсте. Половина размера по ширине и высоте, конечно, учитывая, что window.devicePixelRatio - 2, что-то не совместимое. Программа отлично работает в браузере Chrome. Но не будет работать с помощью пусковой установки Cocoonjs 2.1.1.getImageData(), putImageData() не работает на Nexus 4, используя холст Cocoonjs +

Код:

I 'm using requestAnimationFrame(loop); 

ctx.drawImage(origin_img,0,0,410, 180, 0, 0, width, height); 
texture = ctx.getImageData(0,0,width,height); 

loop{ 
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
ctx.fillStyle = 'red'; 
ctx.fillRect(0,0,width, height); 
ctx.putImageData(texture, 0, 0); 

} 

Результат: Я могу видеть красный прямоугольник с 1/4 размера черным прямоугольником над ним. Может ли кто-нибудь помочь мне с этим?

ctx.drawImage() будет работать в программе.

==============================

Спасибо оба! Я отправил свой код по адресу
http://spikeyang.boxshell.com/static/js/src.zip

Чтобы увидеть результат, нажмите на ссылку 3, ссылка на water_ripple. Нажмите на верхнюю правую кнопку, чтобы вернуться на домашнюю страницу. Главный файл js - js/demo.js. Основной функцией является waterRippleLoop(). Я пробую какой-нибудь водяной рябь.

+0

Не могли бы вы предоставить полный >> работая << исходный код для хрома? Спасибо. – Scdev

+0

Пожалуйста, проверьте ссылку на код. Благодаря! – spikeyang

+0

Эй, я думаю, это исходный код Cocoonjs. Не могли бы вы предоставить исходный код «chrome», так как я хочу поместить его в cocoonjs и проверить его самостоятельно, чтобы быть на 100% уверенным. (Не обязательно, чтобы все приложение просто проблема, но рабочий код, пожалуйста) – Scdev

ответ

0

Я использовал getImageData и putImageData в прошлом, и они отлично работали в Canvas +. Некоторые вопросы:

1.- Вы протестировали его на другом устройстве Android (или устройстве iOS) с помощью Canvas + и сделали это? 2.- Не могли бы вы представить весь исходный код примера? Чем проще, тем лучше.

С уважением, Iker.

+0

Привет, Икер, спасибо! 1. Пока нет; 2. Я добавил ссылку на код. Это просто. – spikeyang

0

Я исследовал проблему немного дальше и не получил ее работу в 2.1 в любом случае. Тем не менее, как вы сказали, он работает как шарм с обычными браузерами, такими как хром.

Поэтому я предполагаю, что это ошибка в последнем выпуске cooconjs, и я создам отчет об ошибке, чтобы получить дополнительную информацию о проблеме.

Чтобы уточнить вещи, которые я создал очень небольшой тест, чтобы показать проблему: https://www.dropbox.com/s/j9zbjzhijxjxk54/test_case.zip?dl=0

В моем тестовом примере 2 фотографии должны отображаться как я скопировать один в верхней части с getImageData и отобразить его снова putImageData.

Нормальный браузер (хром): https://www.dropbox.com/s/782akzq2cguek2j/photo_2015-05-21_20-43-05.jpg?dl=0

Coocon (только одна картинка): https://www.dropbox.com/s/j20qnti0y3rw0gt/photo_2015-05-21_20-43-10.jpg?dl=0

+0

Hi Scdev.Я столкнулся с другой очень похожей проблемой: в демонстрационных приложениях webGL от Ludei, demo2, который является вращающимся синим кубом, если я добавлю в index.html, то окно просмотра webgl, по-видимому, занимает 1/4 экрана. Надеюсь, это может дать некоторые подсказки. – spikeyang