Hợp nhất 2 hình ảnh với node.js?

Question

Tôi muốn hợp nhất 2 hình ảnh bằng cách sử dụng node.js. Hay đúng hơn, tôi muốn đặt một hình ảnh nhỏ hơn trên dây x, y trên một hình ảnh lớn hơn. Thậm chí chính xác hơn: Tôi có một hình ảnh của kính, và một hình ảnh của một khuôn mặt và tôi muốn đặt kính trên mặt. Tôi đã làm một số googling, và tìm thấy một số hình ảnh thao tác thư viện, nhưng không ai dường như có thể hợp nhất hình ảnh.

Answer 1

Tôi đã sử dụng:

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

để làm điều gì đó tương tự (xây dựng một hình ảnh tổng hợp từ các thành phần một cách nhanh chóng).

Nó hoạt động tuyệt vời.

Dưới đây là một số mã ví dụ:

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

} 

Trong trường hợp này, các thành phần được lựa chọn dựa trên tên của hình ảnh, nhưng bạn rõ ràng có thể làm ngược lại. Ngoài ra, tôi tưởng tượng bạn chỉ có thể truyền hình ảnh ra nếu bạn muốn - Tôi viết nó vào một tập tin để nó có sẵn trong thời gian tới nó được yêu cầu.

tôi đặt một tuyến đường như trong này để xử lý thế hệ:

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

Answer 2

Bạn có thể cần điều này: https://github.com/zhangyuanwei/node-images

bộ giải mã hình ảnh Cross-nền tảng (png/jpeg/gif) và mã hóa (png/jpeg) cho Nodejs

images("big.jpg").draw(images("small.jpg"), 10, 10).save("output.jpg");