This one is going to be short and simple (even though it would make a nice extension to the configurator from the previous article).
First, we’ll need a screenshot of a website.
Manet is a cool Node.js app by Vladislav Bauer. To get it up and running you only have to:
- Install a headless web browser
npm install -g phantomjs
- Install Manet
npm install -g manet
- Run Manet
If everything goes well you should see at http://0.0.0.0:8891 the same UI as at the example deploy by Bauer himself.
Instead of PhantomJS (WebKit) you could use an almost-headless browser (SlimerJS - Gecko) as described in Manet’s docs.
Generating the colour palette
Of course it’s also possible to achieve the same server-side with Node.js.
I’ll have to run Manet with CORS option
manet --cors, because my website and Manet are going to be on different ports and that’s an example of violating the same-origin policy.
I’m not going to discuss the whole code which is available on GitHub.
I’ve used Color Thief by Lokesh Dhakar. The only downside it has, is that it may return a different number of colours than you actually wish in the settings. As an alternative one can use e.g. Vibrant.js by Jari Zwarts.
One important thing is the line
img.crossOrigin = "Anonymous";
Without it the browser wouldn’t let Color Thief grab the colours from the screenshot.
Also please remember to set the URL of your own instance of Manet at
var src = "http://192.168.0.12:8891/?url="+url;
The end result should look like on the picture below: