将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