使用 jsdom 或 Canvas for node.js 获取 Vibrant.js 样本

Question

我有一个使用 jsdom 或 Canvas 在 node.js 中获取图像的过程。在下载过程中，我想在后端使用 Vibrant.js 提取色板。我的以下代码均无效。

使用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';

使用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';

});

我可以在 Vibrant.js 中使用 URL，但那是另一个使用 Bluebird 的 http GET，我需要避免调用网络再次下载。

我认为 Vibrant.js 很难理解 Node.js 中的图像对象。

这里的解决方法是什么，以便我可以将正确的图像 class 传递给 Vibrant.js？

Answer 1

正确构建缓冲区

encoding:null returns 缓冲区而不是字符串 。 (strings 给你乱码数据)

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

额外：使用 JIMP

Vibrant构造函数的imagePath arg直接传递给abstract Image构造函数（NodeImage在NodeJS环境下NodeImage使用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))
    })
  });
}

使用 jsdom 或 Canvas for node.js 获取 Vibrant.js 样本

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

javascript

node.js

image

canvas

jsdom

正确构建缓冲区

额外：使用 JIMP