Node-canvas Sendagaya.js@pixiv 2014-03-19
5分で終わらなかった
Node-CanvasSendagaya.js @ pixiv2014-03-19
View Slide
Harukasana.k.a MICHII Shunsuke ಓҪढ़հ2012 pixiv Inc. ΠϯϑϥνʔϜNginx / Apache / MySQL / MongoDBKyototycoon / Solr / Traffic Server / FluentdKibana / Capistrano / Ruby on Rails / Macbook
Harukasana.k.a MICHII Shunsuke ಓҪढ़հ2014 10,000,000ਓϢʔβاըɾInfrastructureɾDeployment
Harukasana.k.a MICHII Shunsuke ಓҪढ़հ2014 10,000,000ਓϢʔβاըɾInfrastructureɾDeploymentɾServer side Javascript (Drawer)ɾClient side JavaScript
Harukasana.k.a MICHII Shunsuke ಓҪढ़հ2014 10,000,000ਓϢʔβاըɾ࠲ඪܥͷ૬ޓมΛܭࢉɾඳըܥσʔϞϯ
ʮେྔֆഅʯͷཪଆ (1)http://inside.pixiv.net/blog/2014/02/28/inside-of-massive-ema-collection-1/
Node-Canvas
Ý
ÝÝαʔόଆͰੜ͠ͳͯ͘ྑ͍ඳը͕ࠩى͖ͳ͍τϥϑΟοΫ͕େ͖͍ΫϥΠΞϯτෛՙ͕େ͖͍αʔόଆͰੜඳըࠩͷՄೳੑτϥϑΟοΫ͕খ͍͞ΫϥΠΞϯτෛՙ͕খ͍͞ΫϥΠΞϯτଆੜ αʔόʔଆੜ
ÝαʔόଆͰੜඳըࠩͷՄೳੑτϥϑΟοΫ͕খ͍͞ΫϥΠΞϯτෛՙ͕খ͍͞αʔόʔଆੜ
ÝαʔόଆͰੜ!ඳըࠩͷՄೳੑ!τϥϑΟοΫ͕খ͍͞!ΫϥΠΞϯτෛՙ͕খ͍͞αʔόʔଆੜ— CPUؤுΕ݁ߏͲ͏ʹͰͳΔ— ؾʹͳΒͳ͔ͬͨ— ඳըͷτϥϑΟοΫͱ͔ΰϛ— ࣮؆୯ʹͳΔ
Node-CanvasɾCanvas implementation for Node.JSɾRenders with CairoɾOutput to JPEG/PNGɾalso supports PDF (no description)
Share Code in Client/ServerÝdraw.coffee draw.coffee← SAME CODE →node-canvasnative canvas
Installation (OS X)$ brew install cairo$ export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig!$ npm install node-canvas
Create canvasCanvas = require('canvas')canvas = new Canvas(320, 240)ctx = canvas.getContext('2d')CoffeeScript
Create canvas and drawCanvas = require('canvas')canvas = new Canvas(320, 240)ctx = canvas.getContext('2d')!ctx.save()ctx.fillStyle = '#ff0000'ctx.fillRect(100, 100, 200, 200)ctx.restore()
Create canvas and drawɾ ϝιουϒϥβͱಉ͡ɾ ඳըࣗମϒϥβͱ΄΅ಉ͡ɾ ͑ΔίϯςΩετ2DίϯςΩετ͚ͩ
Load Image{Image} = Canvas = require 'canvas'fs = require 'fs'path = 'test.png'fs.readFile path, (err, data) ->return next(null) if err or not dataimg = new Imageimg.src = datactx.drawImage img, 0, 0, img.width, img.height
Load Imageɾ ctx.drawImageͰඳըͰ͖Δɾ ΫϥΠΞϯτͱಉ͡Α͏ʹImageΦϒδΣΫτΛ͑Δʂʂʂ
Output to PNG with Streampath = ‘test.png'out = fs.createWriteStream pathout.on 'finish', ->console.log 'fs: finish'!canvas.createPNGStream().pipe out
Output to JPEG with Streampath = 'test.png'out = fs.createWriteStream pathout.on 'finish', ->console.log 'fs: finish'!canvas.createJPEGStream(quality: 75).pipe out
Output to Imageɾ ετϦʔϜग़ྗͰ͖Δɾ ग़ྗܗࣜJPEG/PNGɾ DataεΩʔϜURLʹग़ྗͰ͖Δ
Render Image Qualityctx.patternQuality =fastgoodbestnearestbilinear
Render Image Qualityctx.patternQuality =fast # => nearestgood # => biliinerbest # => biliinearnearestbilinear
Resize Qualityɾ όΠϦχΞ͔͑͠ͳ͍ɾ ߴը࣭ʹ͢ΔʹImageMagickΛ͏ɾ imagemagick-native͍͚Ͳ ϒϩοΩϯάϝιου͔͠ͳ͍
·ͱΊɾ JSΛ͏ͱΫϥΠΞϯτͱαʔόαΠυͰίʔυΛڞ༗Ͱ͖ͯ͘͢͝خ͍͠ɾ Node-Canvas݁ߏී௨ʹಈ͘