Menu
I have a process to get images in node.js using either jsdom or Canvas. During the download process, I want to extract swatches using Vibrant.js in the backend. Neither of my code below works.
Using jsdom
const Vibrant = require('node-vibrant');
const request = require('request');
var jsdom = require("jsdom").jsdom;
var window = jsdom().defaultView;
var document = jsdom('<html><body></body></html>', {
features: {
FetchExternalResources : ['img']
}
});
var imgDom = document.createElement("img");
imgDom.onload = function() {
console.log('onload triggered');
// var imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
// var imgData = imgDom.replace(/^data:image\/gif;base64,/, "")
// var binaryData = new Buffer(imageData, 'base64').toString('binary');
request.get(imgDom.src, function(err, res, body) {
console.log(body.length);
// Spit out a bunch of base64 code
let v = new Vibrant(new Buffer(body, 'binary').toString('base64'));
// Error image.load not found
// let v = new Vibrant(new Buffer(body, 'binary').toString('base64'), {ImageClass: window.Image});
// Error: Path must be a string without null bytes
// let v = new Vibrant(new Buffer(body, 'base64').toString('binary'));
// v.getPalette().then((palette) => console.log(palette));
var swatches = v.swatches();
console.log(JSON.stringify(swatches));
for (var swatch in swatches)
if (swatches.hasOwnProperty(swatch) && swatches[swatch])
console.log(swatch, swatches[swatch].getHex())
});
}
imgDom.src = 'https://unsplash.it/200';
// imgDom.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
Using Canvas
const Vibrant = require('node-vibrant');
const request = require('request');
const Canvas = require('canvas-prebuilt');
const Image = Canvas.Image;
var imgDom = new Image;
imgDom.onload = function() {
console.log('onload triggered');
let v = new Vibrant(imgDom, {ImageClass: Canvas.Image});
v.getPalette().then((palette) => console.log(palette));
};
request.get('https://unsplash.it/200', function(err, res, body) {
console.log(body.length);
imgDom.src = new Buffer(body);
// imgDom.src = new Buffer(body, 'binary').toString('base64');
// imgDom.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
});
I could use URL in Vibrant.js but that's another http GET using Bluebird and I need to avoid calling the network to download again.
I think Vibrant.js has a hard time to understand the Image object in Node.js.
What is the workaround here so that I can pass proper Image class to Vibrant.js?
478
encoding:null returns buffers instead of strings.
(strings gives you unusably garbled data)
const Vibrant = require('node-vibrant');
const request = require('request').defaults({encoding:null});
doRequest('https://i.stack.imgur.com/N4TSy.jpg')
function doRequest(url){
request.get(url, function(err, res, body) {
if(err)throw err
//Here is the magic
const buffer = new Buffer(body)
console.log(buffer)
let v = new Vibrant(buffer)
v.getPalette().then((palette) => console.log(palette))
})
}
The Vibrant constructor's imagePath arg is directly passed to the abstract Image constructor (NodeImage in the NodeJS environment and NodeImage uses Jimp)
/*:USING JIMP:*/
doJimpRequest('https://i.stack.imgur.com/N4TSy.jpg')
const Jimp = require('jimp')
function doJimpRequest(url){
Jimp.read(url, function (err, image) {
if(err)throw err
image.getBuffer(Jimp.AUTO,function(err, buffer){
console.log(buffer)
let v = new Vibrant(buffer)
v.getPalette().then((palette) => console.log(palette))
})
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
