Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Node-canvas
Search
Harukasan
PRO
March 19, 2014
Technology
2
620
Node-canvas
Node-canvas
Sendagaya.js@pixiv
2014-03-19
5分で終わらなかった
Harukasan
PRO
March 19, 2014
Tweet
Share
More Decks by Harukasan
See All by Harukasan
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
370
pixivを支える技術 / 技育CAMPアカデミア
harukasan
PRO
3
500
20240401 新卒研修 - ピクシブにおける技術領域
harukasan
PRO
1
800
ピクシブのコンテンツ配信基盤技術 / pixiv TECH SALON
harukasan
PRO
5
5.6k
Goにおける画像ファイル処理 / golang.tokyo #19
harukasan
PRO
7
6.7k
WebRTC動画をトランスコードする / Transcoding video streams from WebRTC
harukasan
PRO
5
1.6k
ImageFluxを支えるリモート開発 / 20171202
harukasan
PRO
2
1.8k
YAPC::Fukuoka 前夜祭LT / Yet Another Pawoo Commit logs
harukasan
PRO
0
3k
YAPC::Fukuoka lunch session
harukasan
PRO
1
3.1k
Other Decks in Technology
See All in Technology
エンジニア向け技術スタック情報
kauche
0
110
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
260
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
480
IIWレポートからみるID業界で話題のMCP
fujie
0
720
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
790
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
200
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
5
840
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
53
31k
Agentic DevOps時代の生存戦略
kkamegawa
0
950
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
110
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1.1k
Model Mondays S2E02: Model Context Protocol
nitya
0
180
Featured
See All Featured
Scaling GitHub
holman
459
140k
Code Review Best Practice
trishagee
68
18k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Into the Great Unknown - MozCon
thekraken
39
1.9k
It's Worth the Effort
3n
184
28k
Optimizing for Happiness
mojombo
379
70k
Unsuck your backbone
ammeep
671
58k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Music & Morning Musume
bryan
46
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Visualization
eitanlees
146
16k
Transcript
Node-Canvas Sendagaya.js @ pixiv 2014-03-19
Harukasan a.k.a MICHII Shunsuke ಓҪढ़հ 2012 pixiv Inc. ΠϯϑϥνʔϜ Nginx
/ Apache / MySQL / MongoDB Kyototycoon / Solr / Traffic Server / Fluentd Kibana / Capistrano / Ruby on Rails / Macbook
None
Harukasan a.k.a MICHII Shunsuke ಓҪढ़հ 2014 10,000,000ਓϢʔβاը ɾInfrastructure ɾDeployment
Harukasan a.k.a MICHII Shunsuke ಓҪढ़հ 2014 10,000,000ਓϢʔβاը ɾInfrastructure ɾDeployment ɾServer
side Javascript (Drawer) ɾClient side JavaScript
Harukasan a.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
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-canvas native canvas
Installation (OS X) $ brew install cairo $ export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig
! $ npm install node-canvas
Create canvas Canvas = require('canvas') canvas = new Canvas(320, 240)
ctx = canvas.getContext('2d') CoffeeScript
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()
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 data img = new Image img.src = data ctx.drawImage img, 0, 0, img.width, img.height
Load Image ɾ ctx.drawImageͰඳըͰ͖Δ ɾ ΫϥΠΞϯτͱಉ͡Α͏ʹImageΦϒδΣ ΫτΛ͑Δʂʂʂ
Output to PNG with Stream path = ‘test.png' out =
fs.createWriteStream path out.on 'finish', -> console.log 'fs: finish' ! canvas.createPNGStream().pipe out
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
Output to Image ɾ ετϦʔϜग़ྗͰ͖Δ ɾ ग़ྗܗࣜJPEG/PNG ɾ DataεΩʔϜURLʹग़ྗͰ͖Δ
Render Image Quality ctx.patternQuality = fast good best nearest bilinear
Render Image Quality ctx.patternQuality = fast # => nearest good
# => biliiner best # => biliinear nearest bilinear
Resize Quality ɾ όΠϦχΞ͔͑͠ͳ͍ ɾ ߴը࣭ʹ͢ΔʹImageMagickΛ͏ ɾ imagemagick-native͍͚Ͳ ϒϩοΩϯάϝιου͔͠ͳ͍
·ͱΊ ɾ JSΛ͏ͱΫϥΠΞϯτͱαʔόαΠυͰ ίʔυΛڞ༗Ͱ͖ͯ͘͢͝خ͍͠ ɾ Node-Canvas݁ߏී௨ʹಈ͘