
Show HN: Image Effects with CSS - bennettfeely
http://bennettfeely.com/image-effects/
======
MrQuincle
Slightly related question: Does the carbon footprint increase with all this
client side rendering?

I would think just rendering something charcoal on the computer of the
designer should be enough, rather than repeating it on the machines of
thousands of visitors?

~~~
onion2k
Yes, and if your website is using CSS effects to change the same image for
every user then you're making a mistake. Just render the modified image to a
static asset and serve that.

However, if you want to use a pencil effect on an image that you don't have
control over (eg a user's image before they upload it, or something from an
API-driven service like Unsplash) then the technique still has a lot of value.

------
mgalka
Awesome resource. I've spent a lot of time looking for CSS image effects and
found the info out there to be really lacking. Thanks for putting this
together.

------
TuringNYC
This is impressive and the documentation is nice. But it would be nice to get
the 30-second pitch -- is the rationale to push processing onto the client
side? When I think of such effects, I would usually imagine them being on the
server side, perhaps on a dedicated image processing server.

~~~
jonespen
Client side image editor is the first thing I thought of.

~~~
FlorianRappl
But how would you then download the edited image? Either browsers support
taking screenshots via an API (no browser extension) or you would need to
render it on the server side again. Maybe I am missing something?

~~~
errozero
If it was done inside a canvas it would be possible to save it. The effects
would not be as simple to create though.

~~~
camoby
I did something similar in pure JS a few years ago. It's definitely possible
to render the image into a canvas and save it/upload it/present as a data uri.

I'm pretty sure the applied css effects _should_ carry over to the canvas.

Recently, I've been looking more into WebGL and what's possible with GLSL
shader scripts for image warping (for VR) and image processing/effects. see
shadertoy.com etc.

------
visarga
It's like PhotoShop. I used to play with pictures and obtain those effects
10-15 years ago. But I think we can do many more special effects with HTML5
Canvas.

~~~
jaimex2
Its good to see stuff we were doing with java applets and Flash now just are
part of our web frameworks. Its a weird process flow but its slowly getting
there.

------
leni536
Nice. I consider this a hack though, I think that SVG filters are more
suitable for this task.

------
thenormal
Will gladly use, but what is the code's license?

------
iamahacker2
Impressive.

