はじめに
NodeJSでImageMagickのappendのようにサイズがバラバラの画像を単純に横並びで連結させたい機会があったのですが、単純すぎて中々記事が見つからなかったので備忘録的な意味合いも込めて書き残します。
やること
- sharpで画像情報取得、連結
バージョン
NodeJS: v12.14.1
sharp: v0.23.4
成果物
出来上がる画像
ソースコード
yarn init -y
yarn add sharp
ソースはこちら
https://github.com/engabesi/appendImages
まず全文を貼ります。
constsharp=require("sharp");(async()=>{constimagePaths=["images/1.jpg","images/2.jpg","images/3.jpg"];constimageAttrs=[];// 連結する画像の情報取得constpromises=[];constimagePromise=path=>newPromise(asyncresolve=>{constimage=awaitsharp(path);letwidth=0,height=0;awaitimage.metadata().then(meta=>([width,height]=[meta.width,meta.height]));constbuf=awaitimage.toBuffer();resolve({width,height,buf});});imagePaths.forEach(path=>promises.push(imagePromise(path)));awaitPromise.all(promises).then(values=>{values.forEach(value=>imageAttrs.push(value));});// outputする画像の設定constoutputImgWidth=imageAttrs.reduce((acc,cur)=>acc+cur.width,0);constoutputImgHeight=Math.max(...imageAttrs.map(v=>v.height));lettotalLeft=0;constcompositeParams=imageAttrs.map(image=>{constleft=totalLeft;totalLeft+=image.width;return{input:image.buf,gravity:"northwest",left:left,top:0};});// 連結処理sharp({create:{width:outputImgWidth,height:outputImgHeight,channels:4,background:{r:255,g:255,b:255,alpha:0}}}).composite(compositeParams).toFile("output.png");})();これでnode index.jsで実行すると上記のように左上詰めで画像が連結されます。
解説
まずsharpをimportします。
sharpについて詳しくは公式Documentを見てください。
https://github.com/lovell/sharp
https://sharp.pixelplumbing.com/en/stable/
constsharp=require("sharp");画像情報取得
連結する画像パスの配列と画像情報を格納する配列を宣言します。
constimagePaths=["images/1.jpg","images/2.jpg","images/3.jpg"];constimageAttrs=[];画像のwidth, height, bufferを取得するPromiseを作成し、Promise.allで全画像分並列実行させます。Promise.allのthenで先程宣言した画像情報を格納する配列に取得した情報をpushします
constpromises=[];constimagePromise=path=>newPromise(asyncresolve=>{constimage=awaitsharp(path);letwidth=0,height=0;awaitimage.metadata().then(meta=>([width,height]=[meta.width,meta.height]));constbuf=awaitimage.toBuffer();resolve({width,height,buf});});imagePaths.forEach(path=>promises.push(imagePromise(path)));awaitPromise.all(promises).then(values=>{values.forEach(value=>imageAttrs.push(value));});なぜPromise実行時(imagePromise(path))のthenで処理しないのかですが、こちらのthenは実行が完了した順に走ることになります。
今回は連結される並びを固定にしたいのでPromise.allのthenで処理を行っています。
出力画像設定
widthには全画像のwidth合計値、heightには全画像のheightの最大値を取得します
constoutputImgWidth=imageAttrs.reduce((acc,cur)=>acc+cur.width,0);constoutputImgHeight=Math.max(...imageAttrs.map(v=>v.height));sharpはcompositeというメソッドで画像の結合処理等を行います。
そのcompositeメソッドのparam設定を行います
lettotalLeft=0;constcompositeParams=imageAttrs.map(image=>{constleft=totalLeft;totalLeft+=image.width;return{input:image.buf,gravity:"northwest",left:left,top:0};});inputに画像のbufferを入れます。gravityは方角で指定します。今回左上詰めで連結させるのでnorthwestを入れます。leftとtopはoffsetをpx単位で設定します。
詳しくはsharpの公式Docを読んでください。
https://sharp.pixelplumbing.com/en/stable/api-composite/
画像出力
最後にsharpで画像を出力します。
sharp({create:{width:outputImgWidth,height:outputImgHeight,channels:4,background:{r:255,g:255,b:255,alpha:0}}}).composite(compositeParams).toFile("output.png");これでoutput.pngがrootに作成されます。
連結の余白部分が透明でなくてもよかったり、サイズを削減したい場合は、channelsを4から3に変更してbackgroundのalphaを消したり、
出力画像拡張子をjpgに変更等好きなように変更してください。
まとめ
これでrejectを使ってエラーハンドリングをしていない等、色々ゴリ押し気味ですが画像連結処理を実装できました。
一応車輪の再発明をしていないかとドキュメントを眺めましたがそれらしい処理が見当たりませんでした。
もしあれば教えていただけると助かります。
