search

ben-eb / postcss-resemble-image

Provide a gradient fallback for an image that loosely resembles the original.
https://ben-eb.github.io/postcss-resemble-image/
MIT License
433 stars 10 forks source link

Node-only? #1

Closed fregante closed 7 years ago

fregante commented 8 years ago

This is an excellent way to automate this, but I'm wondering if it could use a node-only solution. Having to install non-npm dependencies complicates setup and lengthens CI builds.

ben-eb commented 8 years ago

Do you have any ideas on how to do this? 😄

fregante commented 8 years ago

https://github.com/krasimir/coloor and its dependency https://github.com/jeanmatthieud/color-thief-jimp

ben-eb commented 8 years ago

Sure thing, I would accept a pull request for making this Node only. My main decision to use paper.js was the ease of implementation of this colour average detection; basically the guts of the module are these seven lines;

const rect = new paper.Path.Rectangle(
    i,
    0,
    chunk,
    height
);
stops.push(colourStop(raster.getAverageColor(rect).toCSS(true), i));

https://github.com/ben-eb/postcss-resemble-image/blob/master/src/resembleImage.js#L54-L60

So with this code I could get the module working quickly. I think this is also possible using jimp if the image was cropped into vertical chunks and then averaged using something like https://github.com/bencevans/pixel-average. I'd like to leave this discovery to someone else if they would like to send a pull request, for me this implementation is fast enough; much better than manually using Photoshop!

ben-eb commented 7 years ago

Fixed in https://github.com/ben-eb/postcss-resemble-image/commit/f09a97bed79e3d835f6def3445da49f5a2ac81ec. Waiting for the build to pass, then I'll publish a new major version.