All geek questions in one place

Get Vibrant.js samples using jsdom or Canvas for node.js

I have a process for getting images in node.js using jsdom or Canvas. During the boot process, I want to extract samples using Vibrant.js in the backend. None of my codes below work.

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 the URL in Vibrant.js, but another http GET using Bluebird, and I need to avoid reloading the network.

I think Vibrant.js is not easy to understand Image object in node.js.

What is the workaround here so that I can pass the correct Image class to Vibrant.js?

+5
source share
1 answer

The correct construction of the buffer

encoding:null returns buffers instead of strings . (strings give unsuitable data for distortion)

 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)) }) }

Optional: using JIMP

The Vibrant imagePath arg constructor is directly passed to the abstract image constructor ( NodeImage in NodeJS 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)) }) }); }
0
source

Source: https://habr.com/ru/post/1270938/

More articles:


All Articles