過去記事から分離、追記、一部変更。
参考「ImageMagick で PSD のレイヤー情報を JSON 形式で取り出す & 関連情報 - Qiita」
本記事で使用した ImageMagick のバージョンは 6.8.9 です。
1. ブレンドモード対応
1.1. 早見表
ブレンドモードの表記の対応は以下の表のようになっています。
記載する内容は以下の通り:
ブレンドモード名
ImageMagick, Compose
Photoshop
Photoshop, Blend Mode Key
JavaScript, PSD.js
CSS または JavaScript から利用するためのブレンドモード名
CSS
JavaScript, Canvas
JavaScript, PixiJS
表中で注意が必要な項目は以下のように表記しています:
赤字は動作が間違っているもの
青字は諸事情により使用できないもの
太字は名前や動作に注意が必要なもの
※理由はそれぞれ後述。
ブレンドモード
IM, Compose
Photoshop
キー
JS, PSD.js
-
None
-
-
-
通過 (フォルダ)
Over
Pass Through
pass
passthru
通常
Over
Normal
norm
normal
乗算
Multiply
Multiply
mul
multiply
覆い焼き (リニア)加算Add
LinearDodge
Linear DodgeAdd
lddg
linear_dodge
加算 (発光)Add (Glow)
LinearDodge
-
-
-
減算
Over
Subtract
fsub
subtract
除算
Over
Divide
fdiv
divide
オーバーレイ
Overlay
Overlay
over
overlay
スクリーン
Screen
Screen
scrn
screen
比較 (明)
Lighten
Lighten
lite
lighten
比較 (暗)
Darken
Darken
dark
darken
差の絶対値
Difference
Difference
diff
difference
除外
Exclusion
Exclusion
smud
exclusion
覆い焼き
ColorDodge
Color Dodge
div
color_dodge
焼き込み
ColorBurn
Color Burn
idiv
color_burn
ソフトライト
SoftLight
Soft Light
sLit
soft_light
ハードライト
HardLight
Hard Light
hLit
hard_light
色相
Hue
Hue
hue
hue
彩度
Saturate
Saturation
sat
saturation
カラー
Colorize
Color
colr
color
輝度
Luminize
Luminosity
lum
luminosity
ブレンドモード
Photoshop
CSS
JS, Cnavas
JS, PixiJS
通過 (フォルダ)
Pass Through
-
-
-
通常
Normal
normal
source-over
NORMALSRC_OVER
乗算
Multiply
multiply
multiply
MULTIPLY
覆い焼き (リニア)加算Add
Linear DodgeAdd
-
-
ADD
加算 (発光)Add (Glow)
-
-
lighter
ADD
減算
Subtract
-
-
SUBTRACT
除算
Divide
-
-
-
オーバーレイ
Overlay
overlay
overlay
OVERLAY
スクリーン
Screen
screen
screen
SCREEN
比較 (明)
Lighten
lighten
lighten
LIGHTEN
比較 (暗)
Darken
darken
darken
DARKEN
差の絶対値
Difference
difference
difference
DIFFERENCE
除外
Exclusion
exclusion
exclusion
EXCLUSION
覆い焼き
Color Dodge
color-dodge
color-dodge
COLOR_DODGE
焼き込み
Color Burn
color-burn
color-burn
COLOR_BURN
ソフトライト
Soft Light
soft-light
soft-light
SOFT_LIGHT
ハードライト
Hard Light
hard-light
hard-light
HARD_LIGHT
色相
Hue
hue
hue
HUE
彩度
Saturation
saturation
saturation
SATURATION
カラー
Color
color
color
COLOR
輝度
Luminosity
luminosity
luminosity
LUMINOSITY
※全てのブレンドモードを掲載しているわけではありません。
※ PixiJS は Canvas レンダラの強制が前提です (後述) 。
※ ImageMagick の Compose の None は PixiJS の NONE と別物です (後述) 。
参考「Layer and Mask Information Section - Adobe Photoshop File Formats Specification」
参考「psd.js/blend_mode.coffee at master · meltingice/psd.js · GitHub」
参考「<blend-mode> - CSS: カスケーディングスタイルシート | MDN」
参考「CanvasRenderingContext2D.globalCompositeOperation - Web API | MDN」
参考「PIXI.BLEND_MODES - PIXI - PixiJS API Documentation」
※ Over (overlay でない) や source-over 等は厳密にはブレンドの指定ではありません (別記事参照) 。
参考「アルファ値を含むブレンドモードの画像合成の計算式 - Qiita」
1.2. PSD.js と Canvas API での ブレンドモード対応
「Photoshop の Blend Mode Key」「PSD.js で得られる値」「Canvas API の globalCompositeOperation に指定する値」の対応は、JavaScript 配列で表すと以下の通りです。
const PSD_BLEND_MODES = [
['pass', 'passthru', null],
['norm', 'normal', 'source-over'],
['mul ', 'multiply', 'multiply'],
['lddg', 'linear_dodge', 'lighter'], // メモ: 画像編集ソフトウェアにより合成方法が異なる
['fsub', 'subtract', null],
['fdiv', 'divide', null],
['over', 'overlay', 'overlay'],
['scrn', 'screen', 'screen'],
['lite', 'lighten', 'lighten'],
['dark', 'darken', 'darken'],
['diff', 'difference', 'difference'],
['smud', 'exclusion', 'exclusion'],
['div ', 'color_dodge', 'color-dodge'],
['idiv', 'color_burn', 'color-burn'],
['sLit', 'soft_light', 'soft-light'],
['hLit', 'hard_light', 'hard-light'],
['hue ', 'hue', 'hue'],
['sat ', 'saturation', 'saturation'],
['colr', 'color', 'color'],
['lum ', 'luminosity', 'luminosity'],
['diss', 'dissolve', null],
['lbrn', 'linear_burn', null],
['vLit', 'vivid_light', null],
['lLit', 'linear_light', null],
['pLit', 'pin_light', null],
['hMix', 'hard_mix', null],
['dkCl', 'darker_color', null],
['lgCl', 'lighter_color', null],
];
メンテナンス性を考えると上記のコードが良いと思いますが、実際に使用する場合は Map に変換すると処理速度的に良いと思います。
const CANVAS_BLEND_MODES = new Map(PSD_BLEND_MODES.map(([, name, op]) => [name, op]));
const getCanvasBlendMode = name => CANVAS_BLEND_MODES.get(name) ?? null;
2. ImageMagick の Compose における表記の注意点
None の場合、レイヤーが非表示であることが分かるが、表示したときのブレンドモードを取得できない。
PSD の仕様的には「減算」合成も「除算」合成も対応しているが、ImageMagick では「通常」扱い (バージョンによって変更される可能性あり) 。
「通過」フォルダは「通常」フォルダ扱い。
LinearDodge は本来、単なる「加算」合成をさすが、ソフトウェアによっては「加算 (発光)」合成として使用される。
3. CSS または JavaScript から利用する際の注意点
3.1. CSS で指定する場合
2021/12/28 現在、「加算」「加算 (発光)」「減算」「除算」合成は非対応。
参考「<blend-mode> - CSS: カスケーディングスタイルシート | MDN」
3.2. Canvas API で描画する場合
2021/02/22 現在、「減算」合成と「除算」合成は非対応。
lighter は説明文だけ見ると「加算」合成と間違えやすいが、仕様の数式を見ると「加算 (発光)」合成。
参考「「加算合成」と「加算 (発光) 合成」の違い - Qiita」
参考「9.1.13. Lighter - Compositing and Blending Level 1」
3.3. PixiJS で描画する場合
2021/02/22 現在の PixiJS のバージョンでは、Canvas レンダラを強制しないとほとんどのブレンドモードを使用できないため、注意。
2021/02/22 現在の PixiJS のバージョンでは、Canvas レンダラ使用時に ADD で lighter を代わりに使用する実装になっているため、「加算」合成でなく「加算 (発光)」合成になる。
2021/02/22 現在、Canvas API で SUBTRACT 非対応のため、Canvas レンダラでは SUBTRACT 使用不可。
PIXI.BLEND_MODES.NONE は一部のクラス (State など) のオブジェクトを非表示にするために使用される値で、通常のスプライト等に使用するものではないため、Compose の None と意味が異なる。
結局 Canvas で操作するのとやっていることが変わらないため、PixiJS を使用しなくてもいいかもしれません。
参考「PIXI.Application - PixiJS API Documentation」(※ options.forceCanvas: true で Canvas レンダラを強制)
参考「pixi.js/mapCanvasBlendModesToPixi.ts at dev · pixijs/pixi.js · GitHub」
参考「pixi.js/mapWebGLBlendModesToPixi.ts at dev · pixijs/pixi.js · GitHub」
参考「pixi.js/State.ts at dev · pixijs/pixi.js · GitHub」
参考「pixi.js/Sprite.ts at dev · pixijs/pixi.js · GitHub」
4. その他のブレンドモード
本記事で扱わなかった Photoshop や PSD のブレンドモードとして、以下のようなものがあります。
ブレンドモード
Photoshop
キー
JS, PSD.js
ディザ合成
Dissolve
diss
dissolve
焼き込み (リニア)
Linear burn
lbrn
linear_burn
ビビッドライト
Vivid Light
vLit
vivid_light
リニアライト
Linear Light
lLit
linear_light
ピンライト
Pin Light
pLit
pin_light
ハードミックス
Hard Mix
hMix
hard_mix
カラー比較 (暗)
Darker Color
dkCl
darker_color
カラー比較 (明)
Lighter Color
lgCl
lighter_color
参考「Layer and Mask Information Section - Adobe Photoshop File Formats Specification」
参考「psd.js/blend_mode.coffee at master · meltingice/psd.js · GitHub」
↧