Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node-canvas

 Node-canvas

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

5分で終わらなかった

124da56a613b15fa980427533e4e3839?s=128

Harukasan

March 19, 2014
Tweet

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