Node-canvas - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Node-Canvas

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Node-Canvas

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Output to Image ɾ ετϦʔϜग़ྗͰ͖Δ ɾ ग़ྗܗࣜ͸JPEG/PNG ɾ DataεΩʔϜURLʹग़ྗͰ͖Δ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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