Fatal编程技术网
  • javascript/
  • Javascript 使用jsdom或Canvas for node.js获取Vibrant.js样例

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

javascript node.js image canvas

Javascript 使用jsdom或Canvas for node.js获取Vibrant.js样例,javascript,node.js,image,canvas,jsdom,Javascript,Node.js,Image,Canvas,Jsdom,我有一个使用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 = jsd

我有一个使用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';
我可以在Vibrant.js中使用URL，但这是另一个使用Bluebird的http GET，我需要避免再次调用网络下载

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

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

正确构建缓冲区 
编码：null
返回缓冲区而不是字符串。 （字符串为您提供了无法使用的乱码数据）

额外：使用JIMP Vibrant构造函数的
imagePath
arg直接传递给抽象图像构造函数（
NodeImage
在NodeJS环境中，并且
NodeImage
使用）

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

});

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

/*: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))
    })
  });
}