image convert

48
2015/07/19 11:58 1/48 ページ http://localhost:3000/image_convert.md?print-pdf=1#/4/2 いまさら聞けない いまさら聞けない 画像自動処理 画像自動処理 @kanayannet Gunma.web #20

Upload: net-kanayan

Post on 09-Aug-2015

166 views

Category:

Internet


0 download

TRANSCRIPT

2015/07/19 11:58

1/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

いまさら聞けないいまさら聞けない画像自動処理画像自動処理

@kanayannet

Gunma.web #20

2015/07/19 11:58

2/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

きょう話す事きょう話す事なぜ今この話?

よくある処理比較的よくある処理ちょっと聞かないかも?しれない処理思わぬ罠まとめ

2015/07/19 11:58

3/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

怖い話怖い話....

ちまたで偉い人が画像や通信の最適化など色々話されていますが..

2015/07/19 11:58

4/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

全くの偶然です全くの偶然です!!

タイミングが被っただけです。ごめんなさい。不備がございましたらご容赦ください。 m(__)m

2015/07/19 11:58

5/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

なぜ今この話なぜ今この話??

最近、画像処理に関わる事が多いよな~不具合調整過去の遺産..orz

2015/07/19 11:58

6/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

過去の遺産過去の遺産 = = 悪悪??

必ずきっかけ、経緯があるはず。作った時は良かれと思ってやった事。

2015/07/19 11:58

7/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

経緯経緯 = = ユーザの要望ユーザの要望と考えて成功、失敗談を話せれば..興味を持ってもらえる話になりそう。

2015/07/19 11:58

8/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

よくある画像処理よくある画像処理画面に収まりきらない大きい画像を表示させる場合

2015/07/19 11:58

9/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

「縮小して表示して!」「縮小して表示して!」

2015/07/19 11:58

10/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

HTMLHTMLタグで調整する方法もタグで調整する方法もありますがありますが....

<<imgimg srcsrc==""画像ファイル名"" widthwidth==""横幅"" heightheight==""高さ"">>

2015/07/19 11:58

11/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

画像容量は小さくならない画像容量は小さくならないアクセス頻度が高いサイトでトラフィック(通信量)平気?

ユーザの通信環境は平気?携帯電話は平気?

2015/07/19 11:58

12/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

表示する大きさに画像を表示する大きさに画像をconvertconvert

容量は結果小さくなる。

2015/07/19 11:58

13/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

一つ一つの画像に対して一つ一つの画像に対して都度行う都度行う

2015/07/19 11:58

14/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

手動でやると面倒臭い手動でやると面倒臭い一般ユーザはやりたがらない。

2015/07/19 11:58

15/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

自動で縮小自動で縮小ImageMagick

2015/07/19 11:58

16/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

プログラムから呼び出せるプログラムから呼び出せるconvert -resize 400x300 input.jpg output.jpg今回のコマンドはImageMagickメインで解説します。

2015/07/19 11:58

17/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

よくある画像処理よくある画像処理 終了終了Are You OK ?

2015/07/19 11:58

18/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

比較的よくある画像処理比較的よくある画像処理画像を一覧で表示したい場合小さい画像を並べますよね?

2015/07/19 11:58

19/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

全体的に小さくすると全体的に小さくするとメインの被写体が見えずらくなる場合がある。

2015/07/19 11:58

20/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

例例

2015/07/19 11:58

21/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

小さくしてみた小さくしてみた

2015/07/19 11:58

22/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

どうするのどうするの??

Crop

2015/07/19 11:58

23/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

CropCropの定義の定義画像から xxPX を抜き出す

2015/07/19 11:58

24/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

コマンドでやるとこんな感じですね。コマンドでやるとこんな感じですね。convert -crop 横x縦+横の切抜位置+縦の切抜位置 input.jpg output.jpg

2015/07/19 11:58

25/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

Before -> AfterBefore -> After

2015/07/19 11:58

26/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

切抜位置の適切な数値は切抜位置の適切な数値は....

サイトのユーザがアップする画像の特徴を反映する必要がある。ユーザに委ねたい時は javascriptなどで簡単に切り抜けるGUI用意...(ry

2015/07/19 11:58

27/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

比較的よく聞く話比較的よく聞く話::終了終了

2015/07/19 11:58

28/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

ちょっと聞かないちょっと聞かない画像処理画像処理

2015/07/19 11:58

29/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

アニメアニメGIFGIF

みなさん知ってますよね?

2015/07/19 11:58

30/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

アニメアニメGIF GIF にも色々ありますよ。にも色々ありますよ。

2015/07/19 11:58

31/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

パラパラアニメ方式パラパラアニメ方式一枚一枚を連続で再生

2015/07/19 11:58

32/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

フレーム差分の最適化フレーム差分の最適化動きがある部分の差分情報で再生する方式先ほどのパラパラアニメよりも容量が小さい参考(英語)

http://www.imagemagick.org/Usage/anim_opt/#opt_trans

2015/07/19 11:58

33/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

これをこれを -resize option -resize option だけでだけでconvert convert するとすると......

画像の容量が大幅に増える場合があります(汗)差分アニメでは無くなってしまう。黒い部分が変に混ざる場合も..(壊れる)

2015/07/19 11:58

34/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

こうすると上手くいくこうすると上手くいくconvert input.gif -coalesce -layers OptimizeTransparency -resize 横x縦

output.gif

2015/07/19 11:58

35/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

ちょっと聞かないちょっと聞かない画像処理画像処理::終了終了

2015/07/19 11:58

36/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

思わぬ罠思わぬ罠

2015/07/19 11:58

37/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

画像の横、縦の取得方法画像の横、縦の取得方法((コマンドコマンド))

identify input.gif

2015/07/19 11:58

38/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

こんな情報が返却させるこんな情報が返却させるinput.gif GIF 116x116 116x116+0+0 PseudoClass 256c 5kb

2015/07/19 11:58

39/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

ところでアニメところでアニメgif gif ってどうなんだろってどうなんだろ??

2015/07/19 11:58

40/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

むむむむ!!

input.gif[0] GIF 236x42 236x42+0+0 PseudoClass 256c 4e+01kbinput.gif[1] GIF 236x42 236x42+0+0 PseudoClass 128c 4e+01kbinput.gif[2] GIF 236x42 236x42+0+0 PseudoClass 128c 4e+01kbinput.gif[3] GIF 236x42 236x42+0+0 PseudoClass 256c 4e+01kbinput.gif[4] GIF 236x42 236x42+0+0 PseudoClass 256c 4e+01kb

2015/07/19 11:58

41/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

これってこれって 2 2枚目から枚目からサイズ大きくとかあるサイズ大きくとかある??

2015/07/19 11:58

42/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

あるねあるね......

2015/07/19 11:58

43/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

identify identify で確認で確認atack.gif[0] GIF 32x31 1216x1201+16+15 8-bit sRGB 8c 21.8KB 0.000u

0:00.000 atack.gif[1] GIF 1200x1105 1216x1201+2+9 8-bit sRGB 8c 21.8KB0.000u 0:00.000 atack.gif[2] GIF 1200x1132 1216x1201+3+8 8-bit sRGB 8c

21.8KB 0.000u 0:00.000

2015/07/19 11:58

44/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

これを考慮し忘れるとこれを考慮し忘れると......

atack.gif[0] GIF 32x31

だけで横幅を認識 -> PGは縮小する必要なしと判断

2015/07/19 11:58

45/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

convert convert されずにされずに すり抜けるすり抜ける

2015/07/19 11:58

46/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

余談余談imagemagick の option はかなりあるよ

http://www.imagemagick.org/script/command-line-options.php

2015/07/19 11:58

47/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

まとめまとめ画像処理は奥が深いImageMagick の optionの数 パネエアニメGIF怖い!

2015/07/19 11:58

48/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2

ご清聴ご清聴ありがとうございましたありがとうございました