Hacker News Reader

Comment by jonespen | Hacker News Reader

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

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?

You can render SVG with foreign HTML+CSS to a canvas[1]. I did that in one of my apps (guitar fretboard diagram generator) to render PNGs from my dynamic React components. Worked like a charm!

[1] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...

That was my first thought as well -- it is nice to push compute resources to the client side but the image just exists in memory (as opposed to a transformation process on the server side which takes image inputs and image outputs and can remotely cache the output image.) The other good thing about the server side is super-easy and super-fast pushes to social services, backups, auto-persisted change history, etc.

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

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.

Reply on news.ycombinator.com