Динамически пикселизируйте элемент изображения html

Я должен взять изображение на веб-странице, а затем использовать javascript (или что-то еще, что лучше всего подходит), чтобы динамически его «пикселизировать» (например, в квадраты размером 20 пикселей). Затем, когда пользователь прокручивает страницу вниз, мне нужно, чтобы изображение постепенно увеличивалось в разрешении, пока оно не перестанет быть пиксельным.

Есть идеи, как я могу это сделать? Я понимаю, что могу использовать php для изменения размера изображения и несколько раз и просто выключить изображение, но для этого потребуется загрузить несколько дополнительных изображений. Кроме того, я знаю, что, вероятно, смогу создать эффект с помощью flash и pixelbender, но я хочу добиться этого в рамках ограничений HTML5, CSS и Javascript, если это возможно.

Ценю любые мысли!

Обновление: что-то вроде этого, но с Javascript вместо Flash? http://www.reflektions.com/miniml/template_permalink.asp?id=390


javascript canvas html pixel
person Chris Armstrong    schedule 18.03.2010    source источник
comment
html5 еще даже не вышел   -  person knittl    schedule 18.03.2010
comment
он не доработан, но многие из них можно использовать в современных (не IE) браузерах   -  person Chris Armstrong    schedule 18.03.2010
comment
Лучшее решение, которое я нашел до сих пор, - использовать это: netzgesta.de/transm   -  person    schedule 24.04.2010
comment
Эй, ты когда-нибудь находил правильный способ сделать это? Я уверен, что к настоящему времени HTML 5 поддерживается в достаточной степени, чтобы делать это должным образом. Я делаю нечто подобное, но с видео, и я не уверен, что fillRects - лучший вариант.   -  person NotSimon    schedule 20.07.2012
comment
@Simon, лучший пример, который я видел, - это close-pixelate.desandro.com, не уверен, что работает с видео или нет   -  person Chris Armstrong    schedule 25.09.2012
comment
@Chris Это очень мило, спасибо! В итоге я смог сделать это самостоятельно, но уверен, что это не самый оптимальный способ.   -  person NotSimon    schedule 25.09.2012

Ответы (4)


arrow_upward
4
arrow_downward

Вы можете визуализировать изображение в скрытом <canvas> элементе. Затем воспользуйтесь производным от описанной здесь техники http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation. Чтобы создать пиксельную версию изображения во втором <canvas> элементе, используя постоянно уменьшающийся fillRect's < / а>. Таким образом вы даже буферизуете исходные данные изображения.

edit: Я бы использовал 2 <canvas> элемента, чтобы вам нужно было только один раз получить и нарисовать исходное изображение. Возможно, вы могли бы буферизовать / кэшировать это изображение в том же элементе <canvas>, но, нарисовав его за пределами порта просмотра, я не уверен, возможно ли это.

person Martijn Laarman    schedule 18.03.2010
comment
Звучит многообещающе. Не могли бы вы уточнить, почему мне нужно использовать два элемента холста? - person Chris Armstrong; 18.03.2010
comment
Ах да, это имеет смысл ... Я думаю, что это, вероятно, путь. Знаете ли вы какие-нибудь учебные пособия, которые помогли бы мне сделать что-то подобное? Я понимаю основной принцип, но никогда не пробовал реализовать что-то подобное. - person Chris Armstrong; 18.03.2010
comment
Я думаю, что первая страница показывает, как получить и нарисовать изображение, а затем перебрать его, чтобы получить информацию о цвете при определенных x, y, а вторая do drawrect должна помочь вам начать :). Я не <canvas> эксперт и, вероятно, использовал бы и то, и другое, чтобы начать работу :). - person Martijn Laarman; 18.03.2010

arrow_upward
1
arrow_downward

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

Затем вы можете найти способ изменить разрешение на результат или получить цвет каждого пикселя в позиции (высота и ширина) / 2 квадрата, который вы ищете. Затем сгенерируйте их в теги div или таблицу с соответствующим цветом и размером, что в конечном итоге приведет к созданию собственного изображения.

У меня есть, вероятно, более быстрая идея, когда вы можете иметь несколько версий изображения и изменять их z-index или их видимость при прокрутке. Обычно каждое изображение имеет разное разрешение. Если вам нужно сделать это со многими изображениями, то это решение не будет таким эффективным, как при редактировании большого количества изображений, но вы всегда можете выполнить пакетное редактирование.

Дайте мне посмотреть, если я смогу придумать больше идей, я отредактирую.

person Jonathan Czitkovics    schedule 18.03.2010
comment
Да, я рассматривал несколько изображений, но я бы хотел, чтобы изображение было полноэкранным, поэтому загрузка нескольких больших изображений потребовала бы некоторой нагрузки на полосу пропускания. - person Chris Armstrong; 18.03.2010

arrow_upward
1
arrow_downward

Взгляните на http://close-pixelate.desandro.com/

Объяснение здесь: https://stackoverflow.com/a/8372981/22470

person powtac    schedule 09.10.2012

arrow_upward
0
arrow_downward

Не переносным способом.

Это может быть выполнено во Flash. Расширения Firefox JS позволяют ему читать изображения как массивы JS, строки Base64 и т. Д. Вы можете поэкспериментировать с хаком «1 DIV = 1 пиксель», но получить какой-либо разумный размер изображения на любой разумной скорости сложно. Если вы чувствуете себя очень гипер, вы можете попробовать создавать изображения в кодировке base64 на лету, используя data: URI ... многими способами, но ничего хорошего ...

person SF.    schedule 18.03.2010