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
630
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
Write your own mrbgem, Create your own device
harukasan
PRO
1
82
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
420
pixivを支える技術 / 技育CAMPアカデミア
harukasan
PRO
3
510
20240401 新卒研修 - ピクシブにおける技術領域
harukasan
PRO
1
830
ピクシブのコンテンツ配信基盤技術 / pixiv TECH SALON
harukasan
PRO
5
5.7k
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
Other Decks in Technology
See All in Technology
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
310
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
2k
o11yツールを乗り換えた話
tak0x00
1
300
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
190
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
150
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
230
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
870
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
520
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building an army of robots
kneath
306
45k
Code Review Best Practice
trishagee
69
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
430
Designing for Performance
lara
610
69k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Site-Speed That Sticks
csswizardry
10
750
Practical Orchestrator
shlominoach
190
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Typedesign – Prime Four
hannesfritz
42
2.7k
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݁ߏී௨ʹಈ͘