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
540
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
20240401 新卒研修 - ピクシブにおける技術領域
harukasan
PRO
1
550
ピクシブのコンテンツ配信基盤技術 / pixiv TECH SALON
harukasan
PRO
5
5.1k
Goにおける画像ファイル処理 / golang.tokyo #19
harukasan
PRO
7
6.2k
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
410
大規模Mastodonインスタンスを運用するコツ / Inside Pawoo Mastodon infrastructure
harukasan
PRO
0
2.9k
Other Decks in Technology
See All in Technology
Cloud Service Mesh に触れ合う
phaya72
1
320
One engineer company with Ruby on Rails
rstankov
2
470
uvを使ってストレスフリーな Python開発をしよう!
r74tech
0
260
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
600
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
380
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
200
Max out Local LLM in Challenging Environments
sashimimochi
2
220
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
3
310
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
8
4.9k
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
1
160
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
1
170
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
280
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
A designer walks into a library…
pauljervisheath
201
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
The Invisible Side of Design
smashingmag
294
49k
Git: the NoSQL Database
bkeepers
PRO
423
63k
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݁ߏී௨ʹಈ͘