Hacker News new | past | comments | ask | show | jobs | submit login

You can do many of these effects in plain CSS using the filter operator. As a bonus, you get hardware acceleration if you combine them with translate3d(0, 0, 0).



That's cool, but that doesn't interfere with the library main goal:

"grafi.js is a library intended for learning about how image processing works"


I saw Mariko give a talk about this last week - http://2016.render-conf.com/talks#drawing-on-canvas-a-few-th...

It was absolutely fantastic; really great information about image data & how to process it.


Also - CSS tricks don't work if you're writing command line tools or backend code in JS.


That is true, but grafi.js relies on a browser's canvas API to convert an image to a Uint8ClampedArray of colour values, so it won't work on a command line or backend either. As a way to learn about convolution filters it seems fairly good though.


Good point. https://www.npmjs.com/package/get-pixels can help parse an image to pixels, but it returns a different format than the canvas API's Uint8ClampedArray.


I haven't tested but I think you can convert ndarray to Uint8ClampedArray by doing

    new Uint8ClampedArray(ndarray.data);


Node-canvas provides a compliant Canvas implementation:

https://github.com/Automattic/node-canvas


that is wrong way to do this - write efficient code (simple operations on an array) instead of using huge canvas library to make a library you don't need to use usable


And she beats the purpose instantly by adding this to the readme:

    they code is pretty rough & documentation is not great
There are much better tutorials out there for image processing: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/


The better way of triggering hardware acceleration nowadays is with the CSS will-change API: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change


What I thought was really cool about this though, is that I can start making a "mini-photoshop". It wouldn't be very efficient at all, but I think you could find a way to mix effects together on parts of the picture selected by the user which is what a mini-photoshop is to me. Or maybe I should just look into canvas, but at least I have the choice now.

And even if I programmatically insert inline CSS, there's always the compatibility issues and filter restrictions.


Photo editing using webgl already existed for a couple years now:

http://evanw.github.io/webgl-filter/

http://photogl.net/

https://v3.polarr.co/ (this one seems to be the only real company instead of a demo)




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: