Динамически пикселировать HTML-элемент изображения

Question

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

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

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

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

Answer 1

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

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

Answer 2

Посмотрите на http://close -pixelate.desandro.com /

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

Answer 3

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

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

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

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

Answer 4

не портативным способом.

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