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
560
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
pixivを支える技術 / 技育CAMPアカデミア
harukasan
PRO
3
260
20240401 新卒研修 - ピクシブにおける技術領域
harukasan
PRO
1
610
ピクシブのコンテンツ配信基盤技術 / pixiv TECH SALON
harukasan
PRO
5
5.2k
Goにおける画像ファイル処理 / golang.tokyo #19
harukasan
PRO
7
6.3k
WebRTC動画をトランスコードする / Transcoding video streams from WebRTC
harukasan
PRO
5
1.4k
ImageFluxを支えるリモート開発 / 20171202
harukasan
PRO
2
1.7k
YAPC::Fukuoka 前夜祭LT / Yet Another Pawoo Commit logs
harukasan
PRO
0
2.8k
YAPC::Fukuoka lunch session
harukasan
PRO
1
2.9k
マストドン会議: Pawoo / Mastodon Kaigi2
harukasan
PRO
2
420
Other Decks in Technology
See All in Technology
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
380
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Featured
See All Featured
The Mythical Team-Month
searls
217
43k
Agile that works and the tools we love
rasmusluckow
325
20k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Designing with Data
zakiwarfel
96
5k
Typedesign – Prime Four
hannesfritz
37
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
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݁ߏී௨ʹಈ͘