Fesor
@Fesor
Full-stack developer (Symfony, Angular)

Какой из существующих методов изменения яркости изображения (HTML5 Canvas) быстрее?

Сейчас в рамках проекта пришлось реализовать простенькую функцию которая меняет яркость изображения. Меня очень удивили результаты - на десктопе средненькая картинка (~1000x1000) обрабатывается за каких-нибудь 8мс. На iOS же та же картинка обрабатывается за 1050мс (iOS7.1, iPhone5). Пробовал и поразварачивать циклы и всякие другие штуки... все ни в какую.

jsperf.com/canvas-adjust-brightness

Собственно может можно еще быстрее это все сделать?
  • Вопрос задан
  • 3799 просмотров
Решения вопроса 1
Fesor
@Fesor Автор вопроса
Full-stack developer (Symfony, Angular)
Короче ресерчил ресерчил... решил побаловаться со смешиванием цветов. Итог:
jsfiddle.net/2MHPh/2
Правда ускорение тут есть только для повышения яркости. Методов вычитания цвета нету, а что бы добиться понижения яркости сложением нужно два раза инвертировать изображение (исходник, можно инвертировать перед операциями заранее, и результат). В этом случае производительность будет явно такой же.

jsperf.com/imagedata-manipulatioons - сравнение производительности. Каждый тест-кейс по сути представляет собой обработчик события изменения значения яркости.

Update:
Сделал инверсию через мод смешивания "difference".
jsfiddle.net/sjGcA/2
теперь это полноценная реализация. Разницу стоит смотреть на мобильных девайсах.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
madmages
@madmages
Человек прямоходящий
ну, как вариант можно испльзовать вместо массивов такие замечательные штуки как
Uint8Array
ArrayBuffer
. работа с бинариками как с массивами. но вот поддержка браузеров может не порадовать, да и не сталкивался в упор с такой проблемой и в сие решение не уверен но быстрее должно быть однозначно
Ответ написан
RadiationX
@RadiationX
Front-End разработчик
Китайский планшет со стоковым браузером говорит что всё делает за 71мсек. Опера за 750мсек.

cssdeck.com/labs/mgsdr9zc
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы