Dynamically pixelate an html image element

。_饼干妹妹 提交于 2019-12-04 09:59:42

You could render the picture in a hidden <canvas> element. Then use a derivation of the technique described here http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation . To create a pixelated version of the image in a second <canvas> element using ever decreasing fillRect's. This way you even buffer the orginal image data.

edit: I would use 2 <canvas> elements so that you only have to fetch and draw the original image once. Perhaps you could buffer/cache this image in the same <canvas> element but by drawing it outside of the view port i am not sure if this is possible though.

I would use a calculation where you get the width in pixels divided by the square width and then the height divided by the square height. This would give you the lower resolution your looking for.

Then you can find a way to change the resolution to the result or grab the color of every pixel at position (height and width)/2 of the square your looking for. Then generate them into div tags or table with the appropriate color and size eventually resulting in the image its self.

I have a probably faster idea where you can have multiple versions of the image and change their z-index or their visibility as you scroll. Basically each image would have the different resolutions. If you have to do that to many images then this solution wont be as efficient as there would be lots of image editing but you can always do a batch edit.

Let me see If I can think of more ideas then I will edit.

Not in a portable way.

That might be doable in Flash. Firefox JS extensions allow it to read images as JS arrays, Base64 strings etc. You might experiment with "1 DIV=1 pixel" hack, but it's hard to get any reasonable size of the image at any reasonable speed. If you feel really hyper, you could try creating base64-encoded images on the fly using the data: URI... many ways but none good...

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!