イメージにラベルを追加するNodeJS ImageMagick

Question

これが尋ねられたが、私は答えを見つけるのが苦労している場合はお詫び申し上げます。

ImageMagickでNode GMパッケージを使用しています。私は印象の下にあるので、labelはそこでしか働かない。

画像を取得し、その上にlabelを追加したいとします。

私はもともとこれを達成するためにdrawText()を使用していましたが、私はlabelの自動サイジングをIMで利用する必要があります。私が持っているものは：

im(path.join(__dirname, '../public/images/imgen/backgrounds/', color + '_' + type + '.png')) 
    .gravity('West') 
    .fill('#FFFFFF') 
    .font(path.join(__dirname, '../public/fonts/Lato/Lato-Bold.ttf')) 
    .out('label: ' + text) 
    .write(
     path.join(__dirname, '../public/images/imgen/generated/', fileName), function(err) { 
     if (!err) { 
      // If the write was successful then redirect to the new image 
      res.redirect('/images/imgen/generated/' + fileName); 
     } else { 
      console.error(err); 
      res.status(500).end(); 
     } 
    }); 

上記は、1つではなく2つの画像を生成します。私は空のイメージを作成し、そのイメージをバックグラウンドとして挿入する必要があると推測しています。しかし、私はこれを行う方法を解決することはできません。

im(1080, 1080) 
    .gravity('West') 
    .fill('#FFFFFF') 
    .font(path.join(__dirname, '../public/fonts/Lato/Lato-Bold.ttf')) 
    // Add the image as a background here 
    .out('label: ' + text) 
    .write(
     path.join(__dirname, '../public/generated/', fileName), function(err) { 
     if (!err) { 
      // If the write was successful then redirect to the new image 
      res.redirect('/images/imgen/generated/' + fileName); 
     } else { 
      console.error(err); 
      res.status(500).end(); 
     } 
    }); 

ここで画像を背景として追加すると、画像を追加する方法がわかりません。私は画像を挿入するgm docsのどこにもそれを見つけることができません。

私は.out('texture: ...')と.out('background: ...')を試しましたが、見た目はありません。 IM convert: no decode delegate for this image format TEXTURE '@ error/constituec.c/ReadImage/501'から次のエラーが表示されます。

おそらくout（）メソッドが正しく理解されていない可能性があります。しかし、Githubの問題と検索結果を掘り下げても答えは出てこない。

お手数ですがお寄せいただきありがとうございます。

Answer 1

私はnode.jsにすべての括弧付きの本当の精神ブロックを持っていますが、あなたはどんな助けも歓迎していると言いました。 ImageMagickでコマンドラインから開始して、舞台裏で何が起こっているのかを理解し、それをnode.jsに翻訳できるようにします。

最初に、ImageMagick演算子は、前にダッシュを付けずに、コロンで区切って独自のキャンバスを生成します。つまり、既存のものを書いたり、描画したりする必要はありません。例としては、canvas:、xc:、gradient:、label:ある：

convert -size 100x80 canvas:red a.jpg    # "canvas: is same as "xc:" 

convert -size 100x80 gradient:cyan-magenta a.jpg # "gradient:" has a colon 

convert -size 400x60 -undercolor yellow label:"This will be autosized to fit" -trim c.jpg 

convert -size 400x60 -undercolor yellow label:"... so will this" -trim c.jpg 

ImageMagickが短いメッセージのために大きなフォントを選択したといいでしょうか？

これは問題ありませんが、-annotate（先にダッシュが付いていて、その後ろにコロンが付いていません）を使用する場合は、キャンバスを最初に作成してから、後でこのように注釈を付ける必要があります：

私が取得しています何

convert -size 400x120 xc:blue -fill yellow -annotate +40+80 "Annotation" c.jpg 

、あなたはキャンバスAND（独自のキャンバスを作成し、覚えている）ラベルを作成する場合は、あなたが効果的に2つのキャンバスを持っていると2枚の出力画像を取得することです。だから、それを回避する方法には2つの選択肢があります。あなたのいずれか：

• キャンバスの上に複合にラベルをキャンバスを使用し、それに注釈を付ける、または

• ラベルや背景画像を作成し、。

私はあなたにすでに最初のオプションを示していますので、2番目のオプションを見てみましょう。あなたが望むようにあなたはそれが背景に合成し、正しいサイズのラベルを作成し、好きな場所の背景の上に配置することができ：

convert -size 150x40 -undercolor yellow label:"Some funky text" -trim \ 
    -size 300x200 -gravity center xc:red +swap -composite result.jpg 

をだから、何それはありませんが作成されますラベルは150x40で、その上にテキストを置きます。 2行目は300x200の赤色の別のキャンバスを作成し、それをテキストラベルの後ろに置き（+swapを使用）、それを中間に合成します。あなたは、キャンバスにラベルを合成したので、2つの独立した画像のままではなく、単一の合成画像になっています。

ここでは、ホワイトハウスのイメージを持ち、ラベルを作成してオーバーレイしたい別の例を示します。まず、ラベル、すべての正しいサイズと色を作成し、その後、私たちはホワイトハウスの画像をロードし、上にラベルを合成する前に背中にそれをスワップ：

magick -size 300x200 -background none -fill magenta label:"Some funky label" -trim whitehouse.jpg +swap -gravity southeast -composite result.png 

うまくいけば、あなたはどのように見ることができますすべての最愛の括弧をそれに入れてnode.js ....