5 ms·
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"
by feiss 10y ago
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"
- dkopi 10y agoAlso - CSS tricks don't work if you're writing command line tools or backend code in JS.
- onion2k 10y agoThat 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.
- dkopi 10y agoGood point. https://www.npmjs.com/package/get-pixels 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.
- megalodon 10y agoI haven't tested but I think you can convert ndarray to Uint8ClampedArray by doing new Uint8ClampedArray(ndarray.data);
- zbjornson 10y agoNode-canvas provides a compliant Canvas implementation: https://github.com/Automattic/node-canvas https://github.com/Automattic/node-canvas
- alfanick 10y agothat 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
- benjaminbenben 10y agoI saw Mariko give a talk about this last week - http://2016.render-conf.com/talks#drawing-on-canvas-a-few-things-i-learned-about-pixels 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.
- kowdermeister 10y agoAnd 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/ http://www.html5rocks.com/en/tutorials/canvas/imagefilters/