Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Node-canvas
Harukasan
March 19, 2014
Technology
2
480
Node-canvas
Node-canvas
[email protected]
2014-03-19
5分で終わらなかった
Harukasan
March 19, 2014
Tweet
Share
More Decks by Harukasan
See All by Harukasan
ピクシブのコンテンツ配信基盤技術 / pixiv TECH SALON
harukasan
5
4.5k
Goにおける画像ファイル処理 / golang.tokyo #19
harukasan
7
5.7k
WebRTC動画をトランスコードする / Transcoding video streams from WebRTC
harukasan
5
1.2k
ImageFluxを支えるリモート開発 / 20171202
harukasan
2
1.5k
YAPC::Fukuoka 前夜祭LT / Yet Another Pawoo Commit logs
harukasan
0
2.6k
YAPC::Fukuoka lunch session
harukasan
1
2.6k
マストドン会議: Pawoo / Mastodon Kaigi2
harukasan
2
350
大規模Mastodonインスタンスを運用するコツ / Inside Pawoo Mastodon infrastructure
harukasan
0
2.6k
JPEG streaming in Go
harukasan
2
2.1k
Other Decks in Technology
See All in Technology
PHPのimmutable arrayとは
hnw
1
150
400種類のWeb APIをサポートしているデータパイプラインツールにおけるWeb APIとの共存戦略
cdataj
0
160
OpenShiftのリリースノートを整理してみた
loftkun
2
280
もし本番ネットワークをまるごと仮想環境に”コピー”できたらうれしいですか? / janog51
corestate55
0
350
GitHub Codespaces が拡げる開発環境、いつでもどこでも Visual Studio Code で!
dzeyelid
0
160
Red Hatが ひっそりと開発しているOSSデータストア
chiroito
0
110
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
110
Oktaの管理者権限を適切に移譲してみた
shimosyan
2
260
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
150
PCL (Point Cloud Library)の基本となぜ点群処理か_2023年_第2版.pdf
cvmlexpertguide
0
140
Periodic Multi-Agent Path Planning
hziwara
0
110
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
150
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.5k
Designing Experiences People Love
moore
130
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
A Tale of Four Properties
chriscoyier
149
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Agile that works and the tools we love
rasmusluckow
320
20k
Clear Off the Table
cherdarchuk
79
290k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
A Modern Web Designer's Workflow
chriscoyier
689
180k
How to name files
jennybc
47
73k
The Mythical Team-Month
searls
210
40k
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݁ߏී௨ʹಈ͘