Node-canvas

Transcript

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

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
3. None

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

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

   side Javascript (Drawer) ɾClient side JavaScript

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

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

8. Node-Canvas

9. Ý

10. Ý

11. Ý

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

    ΫϥΠΞϯτଆੜ੒ αʔόʔଆੜ੒

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

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

    — ඳըͷτϥϑΟοΫͱ͔ΰϛ — ࣮૷΋؆୯ʹͳΔ

15. Node-Canvas

16. Node-Canvas ɾCanvas implementation for Node.JS ɾRenders with Cairo ɾOutput to

    JPEG/PNG ɾalso supports PDF (no description)

17. Share Code in Client/Server Ý draw.coffee draw.coffee ← SAME CODE

    → node-canvas native canvas

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

    ! $ npm install node-canvas

19. Create canvas Canvas = require('canvas') canvas = new Canvas(320, 240)

    ctx = canvas.getContext('2d') CoffeeScript

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()

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

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

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

24. Output to PNG with Stream path = ‘test.png' out =

    fs.createWriteStream path out.on 'finish', -> console.log 'fs: finish' ! canvas.createPNGStream().pipe out

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

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

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

28. Render Image Quality ctx.patternQuality = fast # => nearest good

    # => biliiner best # => biliinear nearest bilinear

29. Resize Quality ɾ όΠϦχΞ͔͠࢖͑ͳ͍ ɾ ߴը࣭ʹ͢Δʹ͸ImageMagickΛ࢖͏ ɾ imagemagick-native͸଎͍͚Ͳ
 ϒϩοΩϯάϝιου͔͠ͳ͍

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