$30 off During Our Annual Pro Sale. View Details »

ImageMagick実践入門 画像加工サーバを作ってみよう / ImageMagick and image server

ImageMagick実践入門 画像加工サーバを作ってみよう / ImageMagick and image server

新卒エンジニア研修の座学でImageMagickの話をしました。

Hiroshi Shimoju

October 29, 2017
Tweet

More Decks by Hiroshi Shimoju

Other Decks in Technology

Transcript

  1. ը૾Ճ޻αʔόΛ࡞ͬͯΈΑ͏
    Լॏതࢿ(.01FQBCP *OD
    ৽ଔΤϯδχΞݚम࠲ֶ
    *NBHF.BHJDL࣮ફೖ໳

    View Slide

  2. ΤϯδχΞ ೥౓ೖࣾɾ৽ଔظ

    Լॏതࢿ!TIJNPKV@
    &$ࣄۀ෦46;63*νʔϜ
    TIJNPKVPSH

    View Slide

  3. View Slide

  4. View Slide

  5. ͓͠ͳ͕͖
    wࠓ೔ͷΰʔϧ
    w46;63*ͱը૾ॲཧ
    w*NBHF.BHJDLΛ৮ͬͯΈΑ͏
    wը૾Ճ޻αʔόΛ࡞ͬͯΈΑ͏

    View Slide

  6. ࠓ೔ͷΰʔϧ
    w*NBHF.BHJDLΛ࢖༻ͨ͠ը૾Ճ޻Λ΍ͬͯΈͯɺ
    wը૾ॲཧͨͷͦ͠͏ʂͬͯͳΔ͜ͱ
    wഎޙʹ͋Δ਺ࣜ΍ɺମܥతͳཧղͷͨΊͷཧ࿦ʹ͍ͭ
    ͯ͸ ൃදऀͷ஌ࣝෆ଍ʹΑΓ

    ѻ͍·ͤΜ

    View Slide

  7. 46;63*ͱը૾ॲཧ

    View Slide

  8. 46;63*ͱը૾ॲཧ
    wΞοϓ͞Εͨը૾ΛΞΠςϜը૾
    ͱ߹੒ͯ͠αϜωΠϧΛ࡞Δ
    w5γϟπͷγϫʹ߹Θͤͯը૾Λ
    มܗ σΟεϓϨΠεϝϯτϚο
    ϐϯά
    ͤͨ͞Γ
    wӨΛ͚ͭͨΓ৭Λม׵ͨ͠Γ

    View Slide

  9. 46;63*ͱը૾ॲཧ
    wΞοϓ͞Εͨը૾ΛΞΠςϜը૾
    ͱ߹੒ͯ͠αϜωΠϧΛ࡞Δ
    w5γϟπͷγϫʹ߹Θͤͯը૾Λ
    มܗ σΟεϓϨΠεϝϯτϚο
    ϐϯά
    ͤͨ͞Γ
    wӨΛ͚ͭͨΓ৭Λม׵ͨ͠Γ

    View Slide

  10. *NBHF.BHJDLΛ
    ৮ͬͯΈΑ͏

    View Slide

  11. ͱΓ͋͑ͣΠϯετʔϧ
    $ brew install imagemagick
    OR
    $ sudo apt-get install -y imagemagick
    OR
    $ sudo yum -y install ImageMagick

    View Slide

  12. *NBHF.BHJDL
    wը૾Ճ޻ͱ͍͑͹͜Εͱ͍͏༗໊ϥΠϒϥϦ
    wϝδϟʔ͔ΒϚΠφʔ·Ͱ͞·͟·ͳը૾ܗࣜʹରԠ
    wػೳ͕ଟ͗ͯ͢੬ऑੑ΋ͨͼͨͼൃݟ͞ΕΔ͘Β͍ʜ
    w$Ͱ࣮૷͞Εɺଟ͘ͷݴޠͰόΠϯσΟϯά͕͋Δ
    w3VCZɿSNBHJDL NJOJ@NBHJDLHFN
    w1)1ɿ*NBHJDL֦ுϥΠϒϥϦͳͲ

    View Slide

  13. ίϚϯυ
    wJNBHFNBHJDLͱ͍͏ίϚϯυ͸ͳ͍

    wػೳ͝ͱʹDPOWFSU΍JEFOUJGZͳͲͷίϚϯυʹΘ͔Ε͍ͯΔ
    wͨͩ͠ɺ*NBHF.BHJDL͔Β͸͢΂ͯNBHJDLίϚϯυ΁ͷγϯϘ
    ϦοΫϦϯΫʹͳ͍ͬͯΔ

    View Slide

  14. *NBHF.BHJDL 6CVOUV

    $ ls -Alh /usr/lib/x86_64-linux-gnu/ImageMagick-6.8.9/bin-Q16
    total 88K
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 animate
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 compare
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 composite
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 conjure
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 convert
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 display
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 identify
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 import
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 mogrify
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 montage
    -rwxr-xr-x 1 root root 6.3K Jul 31 13:22 stream

    View Slide

  15. *NBHF.BHJDL .BD)PNFCSFX

    $ ls -Alh /usr/local/Cellar/imagemagick/7.0.7-7/bin | grep -v config
    total 64
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 animate -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 compare -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 composite -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 conjure -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 convert -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 display -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 identify -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 import -> magick
    -r-xr-xr-x 1 shimoju admin 18K 10 9 18:25 magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 magick-script -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 mogrify -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 montage -> magick
    lrwxr-xr-x 1 shimoju admin 6B 10 7 21:02 stream -> magick

    View Slide

  16. JEFOUJGZ
    wը૾ͷ৘ใΛग़ྗͰ͖Δ
    wαΠζΛͬ͞ͱ஌Γ͍ͨͱ͖ͱ͔ɺ
    wେྔͷը૾ͷத͔ΒαΠζ͕ҧ͏΋ͷΛ୳ͨ͠Γͱ͔

    View Slide

  17. JEFOUJGZ
    $ identify *.jpg
    original.jpg JPEG 800x533 800x533+0+0 8-bit sRGB 104823B 0.000u 0:00.000
    resize.jpg JPEG 400x267 400x267+0+0 8-bit sRGB 37116B 0.000u 0:00.000
    ϑΥʔϚοτจࣈྻ͸͜͜Β΁Μࢀরɿhttps://www.imagemagick.org/script/escape.php
    $ identify -format '{"width": %w, "height": %h}' *.jpg | jq
    {
    "width": 800,
    "height": 533
    }
    $ identify -format '%wx%h %f\n' *.jpg | grep -v 800x533
    200x200 crop.jpg

    View Slide

  18. DPOWFSU
    w͞·͟·ͳը૾Ճ޻Λߦ͑Δɺ*NBHF.BHJDLͷϝΠϯίϚϯυ
    wҎ߱͸͢΂ͯDPOWFSUίϚϯυΛѻ͍͖ͬͯ·͢

    View Slide

  19. ద౰ͳը૾Λ༻ҙ͠·͢
    ਖ਼ํܗ͡Όͳ͍΄͏͕͍͍Ͱ͢ɻ͜ͷը૾͸YQY
    ग़యɿIUUQTXXXQBLVUBTPDPNQPTUIUNM

    View Slide

  20. ճస SPUBUF

    ճస
    $ convert -rotate 90 original.jpg rotate.jpg
    ্Լ൓స
    $ convert -flip original.jpg flip.jpg
    ࠨӈ൓స
    $ convert -flop original.jpg flop.jpg
    ্Լࠨӈ൓స
    $ convert -flip -flop original.jpg flipflop.jpg

    View Slide

  21. View Slide

  22. αϯϓϧ TBNQMF

    ϐΫηϧΛؒҾ͘
    $ convert -sample 10% original.jpg sample.jpg
    10%ʹͳΔΑ͏ʹϐΫηϧΛؒҾ͍ͨ͋ͱɺ1000%ʹͳΔΑ͏ʹ֦େ
    →ݩը૾ͱಉ͡αΠζͰϞβΠΫ͕͔͔Δ
    $ convert -sample 10% -sample 1000% original.jpg sample.jpg

    View Slide

  23. View Slide

  24. ϦαΠζ SFTJ[F

    σϑΥϧτͰ͸ΞεϖΫτൺΛม͑ͳ͍ɿࢦఆͨ͠෯ɾߴ͞ʹऩ·ΔΑ͏ʹϦαΠζ͞ΕΔ
    $ convert -resize 400x400 original.jpg resize.jpg
    $ identify resize.jpg
    resize.jpg JPEG 400x267 400x267+0+0 8-bit sRGB 37116B 0.000u 0:00.000
    !Λ͚ͭΔͱΞεϖΫτൺΛແࢹͯ͠ࢦఆͨ͠஋ʹϦαΠζ͢Δ
    $ convert -resize 400x400! original.jpg resize2.jpg
    ෯·ͨ͸ߴ͞ͷΈࢦఆͰ͖Δ
    $ convert -resize 400x original.jpg resize3.jpg

    View Slide

  25. View Slide

  26. Τοδݕग़ FEHF

    ෆ࿈ଓʹมԽ͍ͯ͠ΔՕॴΛݕग़͢Δ
    $ convert -edge 5 original.jpg edge.jpg
    ஋ΛมԽͤͯ͞ΈΑ͏
    $ convert -edge 10 original.jpg edge.jpg
    $ convert -edge 1 original.jpg edge.jpg

    View Slide

  27. View Slide

  28. ੾Γൈ͖ DSPQ

    -gravityͰج४఺Λࢦఆ
    -crop widthxheightͰ੾Γൈ͘αΠζΛࢦఆ
    +/-Ͱج४఺͔Βͷx,y࠲ඪΛࢦఆ
    $ convert -gravity center -crop 200x200+0+0 original.jpg crop.jpg
    ը૾ӈ্Λج४ʹɺxʹ140px,yʹ50pxҠಈ͠ɺͦͷ఺͔Β200x200px੾Γൈ͘
    $ convert -gravity northeast -crop 200x200+140+50 original.jpg crop.jpg

    View Slide

  29. View Slide

  30. ృΓ଍͠ FYUFOU

    ࢦఆͨ͠αΠζʹͳΔΑ͏ʹ༨നΛ௥Ճ͢Δ
    ༨നͷ৭͸-backgroundͰࢦఆͰ͖Δ
    ਖ਼ํܗͷαΠζ͕ඞཁͳͷʹ4:3ͷը૾͔͠ͳ͍ͱ͔ʹศར
    $ convert -background black -gravity center \
    -extent 800x800 original.jpg extent.jpg
    PNG(ಁա͕ѻ͑ΔϑΥʔϚοτ)Ͱ͋Ε͹transparentͰಁաͰ͖Δ
    $ convert -background transparent -gravity north \
    -extent 1000x1000 original.jpg extent.png

    View Slide

  31. View Slide

  32. ͦΖͦΖ߹੒ͨ͘͠
    ͳ͖ͬͯͨΑͶʁ

    View Slide

  33. ͦͷલʹจࣈͷը૾Λ࡞͓ͬͯ͜͏
    $ convert -background transparent \
    -fill '#ff6060' -font Arial -pointsize 128 label:LGTM lgtm.png
    ࢦఆαΠζͰ࡞੒
    $ convert -size 400x200 -gravity center -background transparent \
    -fill '#ff6060' -font Arial -pointsize 128 label:LGTM lgtm.png

    View Slide

  34. ߹੒ DPNQPTJUF

    original.jpgͷ্ʹlgtm.pngΛ߹੒ͯ͠ɺcompose-over.jpgͱͯ͠ग़ྗ
    $ convert original.jpg lgtm.png -gravity center \
    -compose over -composite compose-over.jpg
    -geometryͰج४఺͔ΒҠಈ
    $ convert original.jpg lgtm.png -gravity center -geometry +150+50 \
    -compose over -composite compose-over.jpg

    View Slide

  35. View Slide

  36. ඳըϞʔυ CMFOENPEF

    -composeͰඳըϞʔυΛࢦఆ͢Δ
    ৐ࢉ (multiply)
    $ convert original.jpg lgtm.png -gravity center -geometry +150+50 \
    -compose multiply -composite compose-multiply.jpg
    ΦʔόʔϨΠ (overlay)
    $ convert original.jpg lgtm.png -gravity center -geometry +150+50 \
    -compose overlay -composite compose-overlay.jpg
    ݮࢉ (subtract)
    $ convert original.jpg lgtm.png -gravity center -geometry +150+50 \
    -compose subtract -composite compose-subtract.jpg

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. ඳըϞʔυ CMFOENPEF

    wॏͶΒΕͨը૾ΛͲͷΑ͏ʹ߹੒͢Δ͔ΛࢦఆͰ͖Δ
    w IUUQJNBHFNBHJDLSVMF[KQBSDIJWFT
    w1IPUPTIPQͳͲͷը૾ฤूιϑτʹ͋Δ΋ͷͱಉ༷
    w࣮ࡍͲΜͳܭࢉͰࢉग़͞ΕΔ͔͸ιʔεΛಡΊ͹Θ͔Δʜ͕ɺײ֮Λ
    ͔ͭΉʹ͸(*.1ͷυΩϡϝϯτ͕Θ͔Γ΍͍͢
    w IUUQTEPDTHJNQPSHKBHJNQDPODFQUTMBZFSNPEFTIUNM
    wྫʣ৐ࢉɿ߹੒ը૾ͷ৭্ଆͷ৭Լଆͷ৭

    View Slide

  41. ը૾Ճ޻αʔόΛ
    ࡞ͬͯΈΑ͏

    View Slide

  42. -FOTɿ46;63*ͷը૾Ճ޻αʔό
    w46;63*Ͱ࢖͍ͬͯΔը૾Ճ޻αʔόΛʮ-FOTʯͱݺΜͰ͍Δ
    wը૾ॲཧʹ͸*NBHF.BHJDLΛ࢖༻
    w5γϟπͷαϜωΠϧը૾ੜ੒ॲཧ͸͜͜Β΁Μ
    w ࣾ಺ϦϙδτϦͷ63-ͷͨΊলུ

    View Slide

  43. -(5.(FOFSBUPS ׬੒ͯ͠ͳ͍

    wͦͷ໊΋ʮ:04"406ʯ
    wIUUQTHJUIVCDPNTIJNPKVZPTBTPV
    w3&"%.&ΛಡΜͰΠϯετʔϧ͍ͯͩ͘͠͞
    wॳճͷϏϧυ͸ͪΐͬͱ͕͔͔࣌ؒΓ·͢ʜʜ
    wϦϙδτϦ௚Լʹద౰ͳը૾Λஔ͍ͯɺ

    IUUQMPDBMIPTUJNBHFTJNBHFKQHʹΞΫηεͯ͠ΈΔ

    View Slide

  44. (Pݴޠ
    w(PPHMF͕։ൃͨ͠ɺ͍ΖΜͳ΋ͷ͕ͳ͍ݴޠ ౖΒΕͦ͏

    wΫϥε͕ͳ͍ɺΑͬͯܧঝ΋ͳ͍
    wྫ֎͕ͳ͍
    wδΣωϦΫε͕ͳ͍
    wؔ਺ܕ༝དྷͷύϥμΠϜ΋ͳ͍
    wෆมม਺΍0QUJPOBMɺNBQ΍pMUFSͳͲͷίϨΫγϣϯૢ࡞

    View Slide

  45. (Pݴޠ
    wݴޠ࢓༷Λখ͘͢͞Δ͜ͱͰɺίϯύΠϧ͕ߴ଎Ͱशಘ΋༰қ
    w޲͔ͳ͍ྖҬ΋͋Δ͕ɺదͨ͠ྖҬͰ͸ҖྗΛൃش͢Δ
    wόΠφϦ͕ੜ੒͞ΕΔͨΊɺ$-*πʔϧ΍ϛυϧ΢ΣΞʹศར
    w੩తܕͷԸܙΛड͚ͳ͕Βɺܕਪ࿦ͰܕΛ໌ࣔͤͣʹ։ൃͰ͖Δ
    wฒߦॲཧΛߦ͏ͨΊͷݴޠ࢓༷ HPSPVUJOF
    ͕͋Γɺൺֱత؆୯ʹฒ
    ߦϓϩάϥϛϯά͕Ͱ͖Δ

    View Slide

  46. ୅දతͳιϑτ΢ΣΞ
    wίϚϯυϥΠϯπʔϧ
    wHIRɺQUɺIVHPɺOZBIDMJ
    wϛυϧ΢ΣΞɾαʔό
    w%PDLFSɺDPOTVMɺ%SPOFɺ45/4
    wൺֱతখ͞ͳ ϚΠΫϩαʔϏεࢦ޲ͳ
    "1*αʔό
    wϩϦϙοϓʂϚωʔδυΫϥ΢υͷ"1*αʔό
    wը૾Ճ޻ɾ഑৴αʔϏε*NBHF'MVY

    View Slide

  47. ίʔυΛಡΜͰΈΑ͏
    wNBJOHP
    wΤϯτϦϙΠϯτɻϦΫΤετϧʔλʔίϯτϩʔϥʔ
    w4JOBUSBͳͲͷΑ͏ͳϚΠΫϩϑϨʔϜϫʔΫελΠϧ
    wDPOWFSUFSJNBHFHP
    wը૾Ճ޻Λந৅Խͨ͠ύοέʔδɻ͜͜Ͱ*NBHF.BHJDLΛར༻

    View Slide

  48. ίʔυΛ͍ͬͯ͡ΈΑ͏
    wυΩϡϝϯτΛಡΈͳ͕Β
    wJNBHJDLɿDPOWFSUFSJNBHFHPͰར༻
    wIUUQTHPEPDPSHHPQLHJOHPHSBQIJDTJNBHJDLWJNBHJDL
    wHJOɿNBJOHPͰར༻
    wIUUQTHPEPDPSHHJUIVCDPNHJOHPOJDHJO

    View Slide

  49. ·ͱΊ
    w46;63*Ͱը૾ॲཧ͕Ͳ͏࢖ΘΕ͍ͯΔ͔Λ஌ͬͨ
    w*NBHF.BHJDLΛ࢖ͬͨ؆୯ͳը૾Ճ޻Λ΍ͬͯΈͨ
    wը૾Ճ޻αʔόΛ͍ͬͯ͡Έͨ
    w(Pݴޠʹ৮ΕͯΈͨ

    View Slide

  50. ·ͱΊ
    wΰʔϧ͸ୡ੒Ͱ͖·͔ͨ͠ʁ
    w*NBHF.BHJDLΛ࢖༻ͨ͠ը૾Ճ޻Λ΍ͬͯΈͯɺ
    wը૾ॲཧͨͷͦ͠͏ʂͬͯͳΔ͜ͱ

    View Slide

  51. ͜ΕͰ܅΋
    -(5.ը૾࡞Γ์୊ͩʂ

    View Slide