将2张图片与node.js合并?

我想使用node.js合并2张图片。或者更确切地说,我想将一个较小的图像放置在较大图像上的坐标x,y上。甚至更精确:我有一个眼镜的图像和一张脸的图像,并且我想将眼镜放在脸上。我做了一些谷歌搜索,发现了一些图像处理库,但似乎没有一个能够合并图像。

回答:

我用过:

https://github.com/learnboost/node-

canvas

做类似的事情(动态地从组件构建合成图像)。

效果很好。

这是一些示例代码:

var Canvas = require('canvas'),

fs = require('fs'),

Image = Canvas.Image;

var _components = [{prefix:'f', count:12},

{prefix:'h', count:12},

{prefix:'i', count:12},

{prefix:'m', count:12}];

var _total = 1;

for (var i=_components.length - 1; i>=0; i--){

_components[i].mult = _total;

_total *= _components[i].count;

}

module.exports.ensureImageExists = function(img, cb){

fs.stat(__dirname + '/../public/images/rb/' + img, function(err, stats){

if (err){

if (err.code == 'ENOENT')

generateImage(img, cb);

else

cb(err);

}

else{

cb();

}

});

}

function generateImage(name, cb){

var re = /rb([0-9]*)\.png/

var num = parseInt(re.exec(name)[1]) % _total;

var parts = [];

for (var i=0; i<_components.length; i++){

var n = Math.floor(num / _components[i].mult);

parts.push(_components[i].prefix + (n + 1));

num -= n * _components[i].mult;

}

var canvas = new Canvas(45, 45),

ctx = canvas.getContext('2d');

drawParts();

function drawParts(){

var part = parts.shift();

if (!part)

saveCanvas();

else {

var img = new Image;

img.onload = function(){

ctx.drawImage(img, 0, 0, 45, 45);

drawParts();

};

img.src = __dirname + '/components/' + part + '.png';

}

}

function saveCanvas(){

canvas.toBuffer(function(err, buf){

if (err)

cb(err);

else

fs.writeFile(__dirname + '/../public/images/rb/' + name, buf, function(){

cb();

});

});

}

}

在这种情况下,将根据图像的名称选择组件,但是显然可以这样做。另外,我想您可以根据需要将图像流式传输出去-我将其写入文件,以便下次请求时可用。

我输入了这样的路线来处理这一代:

app.get('/images/rb/:img', requireLogin, function(req, res, next){

//first make sure image exists, then pass along so it is handled

//by the static router

rbgen.ensureImageExists(req.params.img, function(err){

next();

})

});

以上是 将2张图片与node.js合并? 的全部内容, 来源链接: utcz.com/qa/417230.html

回到顶部