Creating a color halftone effect for images using JavaScript

Question

Would anyone be able to tell me if there is a way to apply a color halftone effect to an image using JavaScript and without using WebGL. I need to create it so it can be used across multiple devices and browsers. I have found this but its using WebGL: http://evanw.github.com/webgl-filter/

Would I be able to use three.js or processing.js to achieve it?

Any help would be very appreciated.

This might help: stackoverflow.com/questions/10069171/…

Diodeus - James MacFarlane
– Diodeus - James MacFarlane

2012-11-22 19:22:04 +00:00
Commented Nov 22, 2012 at 19:22 — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Nov 22, 2012 at 19:22

Community · Accepted Answer · 2017-05-23 12:04:38Z

2

Create yourself a canvas element and put the image inside (see link from @Diodeus).
Get the image data from the canvas - now you can iterate over all pixels.
Apply the halftone filter on the image data. see: Algorithm to make halftone images?
Update image data

BTW: I don't recomment to do this on the client machine. Image Processing requires some processing power which may not be available on the client (e.g. Smartphone). Better do it ONCE on the server with e.g. ImageMagick.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Dec 3, 2012 at 14:48

alexloehr

1,8311 gold badge22 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a color halftone effect for images using JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related