使用画像
image.jpg
![元の画像](/img/2019/04/image_origin.jpg)
lorem_ipsum.png
文字以外の部分を透過にしたPNGファイルです。
overlay.jpg
![海の画像](/img/2019/04/overlay.jpg)
画像を合成する
何も指定しないと真ん中に合成されます。
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'lorem_ipsum.png'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![真ん中に合成](/img/2019/04/output_center.jpg)
右下に合成する
gravityオプションで合成する場所を指定できます。
オプション | 場所 |
---|---|
north | 上 |
east | 右 |
south | 下 |
west | 左 |
指定時は方角の指定と同じ順番で続けて指定します。
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'lorem_ipsum.png',
gravity: 'southeast'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![右下に合成](/img/2019/04/output_southeast.jpg)
pixelで合成位置を指定
left,topオプションで位置を指定します。
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'lorem_ipsum.png',
top: 100,
left: 200
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![top,leftで指定して合成](/img/2019/04/output_topleft.jpg)
合成画像を繰り返す
tileを指定すると合成画像を繰り返します。
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'lorem_ipsum.png',
tile: true
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![繰り返して合成](/img/2019/04/output_tile.jpg)
オーバーレイで合成
blendにoverlayを指定します。
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'overlay'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![オーバーレイ合成](/img/2019/04/output_overlay.jpg)
比較(暗)
合成する画像の各ピクセルごとに比較して暗い方を描画します。
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'darken'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![比較(暗)合成](/img/2019/04/output_darken.jpg)
比較(明)
合成する画像の各ピクセルごとに比較して明るい方を描画します。
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'lighten'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![比較(明)合成](/img/2019/04/output_lighten.jpg)
焼き込みカラー
各チャンネルのカラー情報に基づき、基本色を暗くして基本色と合成色のコントラストを強くし、合成色を反映します。ホワイトで合成した場合は、何も変更されません。 Adobe描画モードより
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'color-burn'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![焼き込みカラー](/img/2019/04/output_color-burn.jpg)
覆い焼きカラー
各チャンネルのカラー情報に基づき、基本色を明るくして基本色と合成色のコントラストを落とし、合成色を反映します。ブラックと合成しても変化はありません。 Adobe描画モードより
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'color-dodge'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![覆い焼きカラー](/img/2019/04/output_color-dodge.jpg)
ソフトライト
合成色に応じて、カラーを暗くまたは明るくします。画像上でスポットライトを照らしたような効果が得られます。合成色(光源)が 50 %グレーよりも明るい場合、画像は覆い焼きされたかのように明るくなります。合成色が 50 %グレーよりも暗い場合、画像は焼き込んだように暗くなります。純粋な黒または白でペイントすると、その部分の明暗ははっきりしますが、純粋な黒または白にはなりません。 Adobe描画モードより
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'soft-light'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![ソフトライト](/img/2019/04/output_soft-light.jpg)
ハードライト
合成色に応じて、カラーを乗算またはスクリーンします。画像上で直接スポットライトを照らしたような効果が得られます。合成色(光源)が 50 %グレーよりも明るい場合、画像はスクリーンされたかのように明るくなります。これは、画像にハイライトを追加するときに役立ちます。合成色が 50 %グレーよりも暗い場合、画像は乗算されたかのように暗くなります。これは、画像にシャドウを追加するときに役立ちます。純粋なホワイトまたはブラックでペイントすると、純粋なホワイトまたはブラックになります。 Adobe描画モードより
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'hard-light'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![ハードライト](/img/2019/04/output_hard-light.jpg)
差の絶対値
各チャンネル内のカラー情報に基づいて、合成色を基本色から取り除くか、基本色を合成色から取り除きます。明るさの値の大きい方のカラーから小さい方のカラーを取り除きます。ホワイトと合成すると基本色の値が反転しますが、ブラックと合成しても変化はありません。 Adobe描画モードより
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'difference'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![差の絶対値](/img/2019/04/output_difference.jpg)
除外
差の絶対値モードと似ていますが、効果のコントラストはより低くなります。ホワイトと合成すると、基本色の値が反転しますが、ブラックと合成しても変化はありません。 Adobe描画モードより
const sharp = require('sharp')
sharp('image.jpg')
.composite([{
input: 'overlay.jpg',
gravity: 'north',
blend: 'exclusion'
}])
.toFile('output.jpg', (err, info)=>{
if(err){ throw err }
})
出力画像
![除外](/img/2019/04/output_exclusion.jpg)