Node-canvas

Node-canvas
Sendagaya.js@pixiv
2014-03-19

5分で終わらなかった

Transcript

1. Node-Canvas
   Sendagaya.js @ pixiv
   2014-03-19
   

   View Slide

2. Harukasan
   a.k.a MICHII Shunsuke ಓҪढ़հ
   2012 pixiv Inc. ΠϯϑϥνʔϜ
   Nginx / Apache / MySQL / MongoDB
   Kyototycoon / Solr / Traffic Server / Fluentd
   Kibana / Capistrano / Ruby on Rails / Macbook
   

   View Slide

3. View Slide

4. Harukasan
   a.k.a MICHII Shunsuke ಓҪढ़հ
   2014 10,000,000ਓϢʔβاը
   ɾInfrastructure
   ɾDeployment
   

   View Slide

5. Harukasan
   a.k.a MICHII Shunsuke ಓҪढ़հ
   2014 10,000,000ਓϢʔβاը
   ɾInfrastructure
   ɾDeployment
   ɾServer side Javascript (Drawer)
   ɾClient side JavaScript
   

   View Slide

6. Harukasan
   a.k.a MICHII Shunsuke ಓҪढ़հ
   2014 10,000,000ਓϢʔβاը
   ɾ࠲ඪܥͷ૬ޓม׵Λܭࢉ
   ɾඳըܥσʔϞϯ
   

   View Slide

7. ʮ௒େྔֆഅʯͷཪଆ (1)
   http://inside.pixiv.net/blog/2014/02/28/inside-of-massive-ema-collection-1/
   

   View Slide

8. Node-Canvas
   

   View Slide

9. Ý
   

   View Slide

10. Ý
    

    View Slide

11. Ý
    

    View Slide

12. Ý
    Ý
    αʔόଆͰੜ੒͠ͳͯ͘ྑ͍
    ඳը͕ࠩى͖ͳ͍
    τϥϑΟοΫ͕େ͖͍
    ΫϥΠΞϯτෛՙ͕େ͖͍
    αʔόଆͰੜ੒
    ඳըࠩͷՄೳੑ
    τϥϑΟοΫ͕খ͍͞
    ΫϥΠΞϯτෛՙ͕খ͍͞
    ΫϥΠΞϯτଆੜ੒ αʔόʔଆੜ੒
    

    View Slide

13. Ý
    αʔόଆͰੜ੒
    ඳըࠩͷՄೳੑ
    τϥϑΟοΫ͕খ͍͞
    ΫϥΠΞϯτෛՙ͕খ͍͞
    αʔόʔଆੜ੒
    

    View Slide

14. Ý
    αʔόଆͰੜ੒!
    ඳըࠩͷՄೳੑ!
    τϥϑΟοΫ͕খ͍͞!
    ΫϥΠΞϯτෛՙ͕খ͍͞
    αʔόʔଆੜ੒
    — CPU͸ؤுΕ͹݁ߏͲ͏ʹͰ΋ͳΔ
    — ؾʹͳΒͳ͔ͬͨ
    — ඳըͷτϥϑΟοΫͱ͔ΰϛ
    — ࣮૷΋؆୯ʹͳΔ
    

    View Slide

15. Node-Canvas
    

    View Slide

16. Node-Canvas
    ɾCanvas implementation for Node.JS
    ɾRenders with Cairo
    ɾOutput to JPEG/PNG
    ɾalso supports PDF (no description)
    

    View Slide

17. Share Code in Client/Server
    Ý
    draw.coffee draw.coffee
    ← SAME CODE →
    node-canvas
    native canvas
    

    View Slide

18. Installation (OS X)
    $ brew install cairo
    $ export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig
    !
    $ npm install node-canvas
    

    View Slide

19. Create canvas
    Canvas = require('canvas')
    canvas = new Canvas(320, 240)
    ctx = canvas.getContext('2d')
    CoffeeScript
    

    View Slide

20. Create canvas and draw
    Canvas = require('canvas')
    canvas = new Canvas(320, 240)
    ctx = canvas.getContext('2d')
    !
    ctx.save()
    ctx.fillStyle = '#ff0000'
    ctx.fillRect(100, 100, 200, 200)
    ctx.restore()
    

    View Slide

21. Create canvas and draw
    ɾ ϝιου͸ϒϥ΢βͱಉ͡
    ɾ ඳըࣗମ͸ϒϥ΢βͱ΄΅ಉ͡
    ɾ ࢖͑ΔίϯςΩετ͸2DίϯςΩετ͚ͩ
    

    View Slide

22. Load Image
    {Image} = Canvas = require 'canvas'
    fs = require 'fs'
    path = 'test.png'
    fs.readFile path, (err, data) ->
    return next(null) if err or not data
    img = new Image
    img.src = data
    ctx.drawImage img, 0, 0, img.width, img.height
    

    View Slide

23. Load Image
    ɾ ctx.drawImageͰඳըͰ͖Δ
    ɾ ΫϥΠΞϯτͱಉ͡Α͏ʹImageΦϒδΣ
    ΫτΛ࢖͑Δʂʂʂ
    

    View Slide

24. Output to PNG with Stream
    path = ‘test.png'
    out = fs.createWriteStream path
    out.on 'finish', ->
    console.log 'fs: finish'
    !
    canvas.createPNGStream().pipe out
    

    View Slide

25. Output to JPEG with Stream
    path = 'test.png'
    out = fs.createWriteStream path
    out.on 'finish', ->
    console.log 'fs: finish'
    !
    canvas.createJPEGStream(quality: 75).pipe out
    

    View Slide

26. Output to Image
    ɾ ετϦʔϜग़ྗͰ͖Δ
    ɾ ग़ྗܗࣜ͸JPEG/PNG
    ɾ DataεΩʔϜURLʹग़ྗͰ͖Δ
    

    View Slide

27. Render Image Quality
    ctx.patternQuality =
    fast
    good
    best
    nearest
    bilinear
    

    View Slide

28. Render Image Quality
    ctx.patternQuality =
    fast # => nearest
    good # => biliiner
    best # => biliinear
    nearest
    bilinear
    

    View Slide

29. Resize Quality
    ɾ όΠϦχΞ͔͠࢖͑ͳ͍
    ɾ ߴը࣭ʹ͢Δʹ͸ImageMagickΛ࢖͏
    ɾ imagemagick-native͸଎͍͚Ͳ

    ϒϩοΩϯάϝιου͔͠ͳ͍
    

    View Slide

30. ·ͱΊ
    ɾ JSΛ࢖͏ͱΫϥΠΞϯτͱαʔόαΠυͰ
    ίʔυΛڞ༗Ͱ͖ͯ͘͢͝خ͍͠
    ɾ Node-Canvas͸݁ߏී௨ʹಈ͘
    

    View Slide