Node-canvas

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

5分で終わらなかった

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
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͸݁ߏී௨ʹಈ͘