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分で終わらなかった

Harukasan

March 19, 2014
Tweet

More Decks by Harukasan

Other Decks in Technology

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