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

Question

[Сергей Протько]

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

jsperf.com/canvas-adjust-brightness

Собственно может можно еще быстрее это все сделать?

Answer 1

[Сергей Протько]

Короче ресерчил ресерчил... решил побаловаться со смешиванием цветов. Итог:
jsfiddle.net/2MHPh/2
Правда ускорение тут есть только для повышения яркости. Методов вычитания цвета нету, а что бы добиться понижения яркости сложением нужно два раза инвертировать изображение (исходник, можно инвертировать перед операциями заранее, и результат). В этом случае производительность будет явно такой же.

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

Update:
Сделал инверсию через мод смешивания "difference".
jsfiddle.net/sjGcA/2
теперь это полноценная реализация. Разницу стоит смотреть на мобильных девайсах.

Comments

[Евгений Низамиев]

А какое разрешение изображения?

[Сергей Протько]

@RadiationX где-то 5 мегапикселей. Сейчас при изменении параметров изображения пересчитывается большая картинка и обновляется превью, сейчас думаю как бы это дело сначала заставлять отрабатывать на превьюшках и отложено запускать на оригинале. Все омрачает то, что все эти замечательные вещи типа webworkers не поддерживаются в android меньше 4,4.

[Евгений Низамиев]

И всё-таки мне кажется что мой "способ" быстрее вашего
cssdeck.com/labs/cupdw3jf , на планшете всего 11мс требуется для осветления или затемнения, однако на выполнение всего кода требуется около 80мс, так что правильнее было бы выполнять только часть где изображение осветляется.
---------
Скопируйте основное изображение на другой канвас и уменьшите размер, далее применяйте осветление только на превью, а когда всё будет готово - просто передать параметры для осветления основного канваса.(объяснил как боженька).
--------
Я так понял вы делаете какое-то приложение для обработки фотографий?

[Сергей Протько]

@RadiationX ваш способ один из самых медленных что есть. в моих тестах на jsperf он фигурирует, причем в разных вариациях. А теперь запустите мои тестики на вашем планшете.

[Евгений Низамиев]

@Fesor а ну ок, я просто мерил по циферка в фиддле)

[Сергей Протько]

@RadiationX, придумать бы как быстро делать еще и инверсию картинки... ибо уменьшение яркости моим способом нельзя сделать. Я думал сделать инверсию через darker, но оно не вычитает цвета как я думал изначально, а просто оставляет самый темный цвет.

[Евгений Низамиев]

@Fesor быстро не получится.
На ум приходит разве что SVG и CSS фильтры

[Сергей Протько]

@RadiationX реализовал быструю инверсию изображения. Оказывается есть еще тип смешивания "Difference". Просто вычитания не нашел, но уже неплохо.

[Евгений Низамиев]

@Fesor а для чего вы это делаете?

[Сергей Протько]

@RadiationX просто меня раздражает длительность действия этой казалось бы простой операции на мобильниках. Да и просто поразбираться. Вообще с блендинг модами и режимами композиции можно много чего интересного делать и причем в реалтаймме.

[impfromliga]

Сергей Протько: Здравствуйте, очень понравился ваш алгоритм, но нашел в нем странный баг.
- (хотелось реализовать эффект поклеточного освещения, так и наткнулся
- я бился сутки думая что где то что то не так использую, пока не протестировал ваш код без изменений. (менялся только графический файл)
- большой имейдж от 512х256 (найдено опытным путем) этот скрипт затемняет правильно
- а маленькие 64х64 тайлсеты почему то нет... (черный прямоугольник)

Если бы вы могли хотя бы объяснить почему так может происходить, я был бы очень благодарен. Спасибо.

//Будто drawImage то ли на нативном уровне ускоряется в другом потоке и там успевает перегнать другую операцию вывода. И рассинхрониться. Но разве такое может быть? Повторяю ни строки кода не меняется! Баг есть и его легко повторить, заменив имейдж на меленький.

//В принципе т.к. алг. действительно очень быстрый, баг можно обойти просто раздув исходный маленький имейдж на большой канвас. Но это обход а не решение. Т.к. мне нужна была статика, я просто сделал кеш для набора оптом. Но для динамики такое непрокатит.

[impfromliga]

impfromliga: в принципе это не накладное решение...
512х256х4байта_на_канал = 512КБ памяти оверхед максимум, по скорости не замерял, но алг. все равно очень быстр для использования, даже с оверхедом.

[Сергей Протько]

impfromliga: если бы вы привели пример на jsbin например было бы удобнее. В целом не понятно о каких потоках вы говорите (в JS нет потоков как таковых, только web-workers если).

В целом сейчас я не вижу в этом алгоритме ровно никакого смысла потому что есть webgl.

[impfromliga]

Сергей Протько: Хорошо, вот форк, ни символа кода не изменено! Замена только картинки!
https://jsfiddle.net/z09dt2v4/1/ - отрицательная яркость не работает!

- про потоки имел виду нативный движок браузера. Я сутки бился над пониманием почему так происходит, похоже это в реализации вебкита ошибка!
- может это не достаточно профессионально звучит, но у меня честно больше нет идей.

//смысл от алгоритма смею заверить есть! - для обратной совместимости.

Answer 2

[sasha]

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

Comments

[Сергей Протько]

ImageData и так содержит uInt8ClampedArray, собственно он учавствует в бенчмарках. Вариант с массивами чисто для сравнения и он намного медленнее. На десктопах в десятки раз. Но я в упор не понимаю как так выходит что на iOS подобные вычисления отрабатывают в сотню раз дольше. Это как-то грустно.

Answer 3

[Евгений Низамиев]

Китайский планшет со стоковым браузером говорит что всё делает за 71мсек. Опера за 750мсек.

cssdeck.com/labs/mgsdr9zc

Comments

[Евгений Низамиев]

пардон, ошибся.
37 стоковый браузер и 430 опера