2011-11-09 5 views
10

node.jsを使用して2つの画像をマージします。または、むしろ、私は小さな画像を座標x、yに大きな画像に配置したいと考えています。 さらに正確には:私は眼鏡のイメージと顔のイメージを持っており、私は顔に眼鏡をかけたいです。 私はいくつかのグーグルを行い、いくつかの画像がライブラリを操作していることを発見しましたが、画像をマージすることはできません。node.jsで2つの画像をマージしますか?

答えて

7

私が使用してきました:

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

ありがとう、それはちょうど私が望むように見えます。 –

+0

JPEG画像で失敗する – Max

18

あなたはこの必要がある場合があります:https://github.com/zhangyuanwei/node-images

クロスプラットフォームの画像デコーダ(PNG/JPEG/GIF)とエンコーダ(PNGを/ jpeg)

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

すばらしい!広告されたのと同じように機能します。 – Rick

+0

これは私が探していたものです。依存性がなく、使いやすく、高速です。 – poiasd

+0

最新のnodejsこのlibがサポートするバージョンは、x64では6.0.0、x86では5.0.0です。 –