Я хочу объединить 2 изображения, используя node.js. Вернее, я хочу поместить одно меньшее изображение на корнитах x, y на большее изображение. Еще точнее: у меня есть изображение очков и изображение лица, и я хочу поставить очки на лицо. Я сделал некоторые поисковые запросы и нашел некоторые библиотеки для обработки изображений, но ни один из них не может объединить изображения.
Объединить 2 изображения с помощью node.js?
Ответ 1
Я использовал:
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
Вам может понадобиться следующее: https://github.com/zhangyuanwei/node-images
Кросс-платформенный декодер изображений (png/jpeg/gif) и кодировщик (png/jpeg) для Nodejs
images("big.jpg").draw(images("small.jpg"), 10, 10).save("output.jpg");
Ответ 3
Протестировал несколько библиотек для аналогичной задачи и, наконец, реализовал эту.
https://github.com/lovell/sharp.
Чистый API и все, что вам нужно, чтобы объединить два изображения.
Пример:
sharp(path + 'example.jpg')
.overlayWith(path + 'label.png', { gravity: sharp.gravity.southeast } )
.toFile(path + 'output.png')
Ответ 4
У меня недостаточно репутации, чтобы добавить комментарий, иначе я бы ответил Шмидко.
Sharp работает хорошо, однако overlayWith устарел, и вам вместо этого нужно использовать композитный. Смотрите ниже:
sharp(path + 'example.jpg')
.composite([{input: path + 'logo.png', gravity: 'southeast' }])
.toFile(path + 'output.png');
Если вы хотите расположить изображение по центру:
gravity: 'centre'