imagemagick_knowhow - Speaker Deck

imagemagick_knowhow

by yoya

Slide 1

Slide 1 text

もうサムネイルで泣かないための ImageMagick ノウハウ集に一言 2015/01/22(金) “よや” [email protected]

Slide 2

Slide 2 text

自己紹介 @yoya •  ImageMagick のストーカーです –  h

Slide 3

Slide 3 text

一部界隈で話題 •  もうサムネイルで泣かないための ImageMagick ノウハウ集 – h

Slide 4

Slide 4 text

良いと思ったノウハウ •  リリース大量消費に注意 – limit 大事 (特にユーザ投稿画像を扱う場合) •  ImageMagick のオプションの順序に注意 – 引数を先頭から順に命令実行する $ convert -‐limit memory 256MB -‐limit disk 0 src.jpg dst.png $ convert in.png -‐resize 200x200 -‐background red –ﬂa

Slide 5

Slide 5 text

ツッコミ目次 •  画像比較は人間の眼で行うべし？ •  OrientaYon を考慮しよう？ •  透過画像を考慮しよう？ •  グレースケール画像を考慮しよう？ •  -‐deﬁne jpeg:size に注意？

Slide 6

Slide 6 text

画像比較は人間の眼で行うべし？ (1/4) •  最終的な判断は人間の眼だけど、それだけでは画像の差を結構見逃します – 間違い探しの得手不得手があるように画像認識は個人差が大きいので、なるべく計算で炙り出す •  2枚の画像のdiﬀ(差分)を超簡単に調べる方法 – h

Slide 7

Slide 7 text

画像比較は人間の眼で行うべし？ (2/4) h

Slide 8

Slide 8 text

画像比較は人間の眼で行うべし？ (3/4) •  差分が大きい場所に注目すれば見逃しにくい

Slide 9

Slide 9 text

画像比較は人間の眼で行うべし？ (4/4) •  compose difference と idenfity mean でピクセル差分の度合いを算出 •  特定バージョンとの差を数値でリスト 569.07 : 6.6.9-‐6-‐logo.gif 569.07 : 6.6.9-‐7-‐logo.gif 9533.31 : 6.6.9-‐8-‐logo.gif 569.07 : 6.6.9-‐9-‐logo.gif 569.07 : 6.7.0-‐0-‐logo.gif $ for i in *-‐logo.gif ; do composite -‐compose difference 6.9.3-‐0-‐logo.gif $i t.png ; idenYfy -‐format "%[mean]" t.png ; echo " : $i" ; done 差分の大きいバージョン発見！

Slide 10

Slide 10 text

OrientaYon を考慮しよう？(1/4) •  オフセットが壊れる？ •  JPEG を経由する方法を提案してる •  ツッコミ詳細 -‐auto-‐orient でオフセットがズレる件 h

Slide 11

Slide 11 text

OrientaYon を考慮しよう？(2/4) •  オフセットが壊れる件は恐らく、signed long (32bit符号付き整数)を unsigned long で表示 •  正しくはこう。(2の補数表現で計算) $ convert right-‐mirrored.jpg -‐auto-‐orient out.png $ idenYfy out.png out.png PNG 480x640 640x480+160+4294967136 8-‐bit PseudoClass 256c 13.8KB 0.000u $ convert right-‐mirrored.jpg -‐auto-‐orient out.png $ idenYfy out.png out.png PNG 480x640 640x480+160-‐160 8-‐bit PseudoClass 256c 13.8KB 0.000u 0:00.000

Slide 12

Slide 12 text

OrientaYon を考慮しよう？(3/4) •  RotateImage 関数に 90 といった角度の値を渡して回転させてる – 回転軸を間違えて左上隅の座標が移動

Slide 13

Slide 13 text

OrientaYon を考慮しよう？(4/4) •  Webブラウザがレイアウトする時に以下のようにズレる可能性がある •  +repage (描画領域の座標をリセットする)で対処可能

Slide 14

Slide 14 text

透過画像を考慮しよう？(1/2) •  -extent で背景を白にできる？ •  -extent はキャンバスの拡大命令 $ convert in.png -‐resize 200x200 out.jpg $ convert in.png -‐resize 200x200 -‐extent 200x200 out.jpg $ convert in.png -‐resize 200x200 –extent 400x400 out.jpg

Slide 15

Slide 15 text

透過画像を考慮しよう？（2/2) •  -ﬂa

Slide 16

Slide 16 text

グレースケールを考慮しよう？(1/2) •  ブログの記述 •  減色処理で暗くなるのは不自然 – 参考) h

Slide 17

Slide 17 text

グレースケールを考慮しよう？(2/2) •  ツッコミ詳細グレー形式JPEGをPNGに変換すると暗くなる件 hcolorspace) == MagickFalse) && < (IssRGBColorspace(image-‐>colorspace) == MagickFalse)) -‐-‐-‐ > if ((IssRGBCompaYbleColorspace(image-‐>colorspace) == MagickFalse) || > (IssRGBColorspace(image-‐>colorspace) != MagickFalse))

Slide 18

Slide 18 text

-‐deﬁne jpeg:size に注意？ (1/4) •  注意は必要なのですが •  これは勿体無い •  ツッコミ詳細 JPEG の size hinYng について – h

Slide 19

Slide 19 text

-‐deﬁne jpeg:size に注意？ (2/4) •  普通に小さくリサイズ •  jpeg:size つきで小さくリサイズ (メモリ節約)

Slide 20

Slide 20 text

-‐deﬁne jpeg:size に注意？ (3/4) •  普通に大きくリサイズ •  jpeg:size つきで大きくリサイズ (余計にメモリを使う)

Slide 21

Slide 21 text

-‐deﬁne jpeg:size に注意？ (4/4) •  1/2〜1/3以下にリサイズされる時のみ – deﬁne jpeg:size をつければ良い •  本当は速いImageMagick: サムネイル画像生成を10倍速くする方法 •  h

Slide 22

Slide 22 text

ツッコミまとめ •  画像比較は人間の眼で行うべし？ –  > なるべく計算で炙り出そう •  OrientaYon を考慮しよう？ –  > バグなんだけど +repage で補正できる •  透過画像を考慮しよう？ –  > -‐extent でも治るけど -‐ﬂa 減色処理でなく一時期あった色空間の不具合 •  -‐deﬁne jpeg:size に注意？ –  > メモリとCPUの節約効果大きいので ½〜1/3 以下に縮小する時は積極的に使っていきたい

Slide 23

Slide 23 text

質問タイム •  （袋叩きにされるイメージ画像)