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
[飛込] jsでゴリゴリ画像処理
Search
zk-phi
May 09, 2019
Programming
0
120
[飛込] jsでゴリゴリ画像処理
canvas と js で画像処理をするときの Tips 集を飛び込みで喋りました
zk-phi
May 09, 2019
Tweet
Share
More Decks by zk-phi
See All by zk-phi
[LT] 最近遊んだインディーゲーム
zk_phi
0
180
[LT] ちょっと賢く酒を飲む
zk_phi
0
250
[LT] 渋谷発おすすめ散歩ルート
zk_phi
0
220
[LT] ビールじゃない話
zk_phi
0
300
今週末できるお手軽ビアテイスティング
zk_phi
1
150
[LT] ビールが面白い話・2
zk_phi
1
380
[LT] 早押しクイズが楽しい話
zk_phi
0
230
[LT] ビールがおもしろい話
zk_phi
2
210
[LT] OpenSCAD でキーボード設計
zk_phi
0
740
Other Decks in Programming
See All in Programming
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
24
9.2k
ワープロって実は計算機で
pepepper
2
1.4k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
190
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
Understanding Ruby Grammar Through Conflicts
yui_knk
1
190
私の後悔をAWS DMSで解決した話
hiramax
4
170
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.5k
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
210
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
コンテキストエンジニアリング Cursor編
kinopeee
1
730
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Building Adaptive Systems
keathley
43
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Language of Interfaces
destraynor
160
25k
Transcript
ੜ KT ͰΰϦΰϦը૾ॲཧ
Ұ࣌ظϋϚ͍ͬͯͨɿ
$BOWBTͰṖΞϓϦ࣮
Ξχϝֆจࣈ δΣωϨʔλʔ
Ϋιίϥࢧԉ എܠൈ͖ଠ ࣸਅͺͨͦ͘
ͪͳΈʹ࠷ۙɿ
ੜ KT ͰΰϦΰϦը૾ॲཧ ![LQIJ
શ෦ੜ KT Ͱͨ͠ ɾഎܠ HMPXDVU ɾHJGΞχϝͷΤϯίʔυ ɾFUD
͍͔ͭ͘ 5JQTΛհ
ը૾ΛಡΈࠐΉ
*NH λάͰ (&5 <img src=“https://hogehoge.com/piyopiyo.png” crossorigin> ɾDSPTTPSJHJO Λ͚ͭΔͱ $034Ͱ͖Δ ɾ$034͠ͳ͍ͱ
DBOWBTʹίϐʔͰ͖ͳ͍
ը૾ͷຊདྷͷαΠζΛΔ var imageWidth = document.getElementById(“hoge”).naturalWidth; ɾOBUVSBMΛ͚ͭͳ͍ͱཁૉͷαΠζʹͳΔ
ը૾ͷੜσʔλΛೖख
ը૾ͷੜσʔλΛೖख var canvas = document.createElement(“canvas”); canvas.width = img.naturalWidth; canvas.height =
img.naturalHeight; var ctx = canvas.getContext(‘2d’); ctx.drawImage(img, 0, 0); var data = ctx.getImageData(0, 0, canvas.width, canvas.height); ɾDUYHFU*NBHF%BUB Ͱྻ͕औΕΔ
ੜσʔλͷϑΥʔϚοτ R G B A R G B A ……
ը૾ΛΰϦΰϦ͢Δ
ը૾ΛΰϦΰϦ͢Δ ɾΞϧΰϦζϜΛؤு࣮ͬͯ͢Δ ɾۭؒతʹ࣌ؒతʹ࣮ߦޮ͕ݫ͍͠
5ZQFE"SSBZ ɾKT ͷ "SSBZΦϒδΣΫτ ɾ$ݴޠͷΑ͏ͳ੩తͳྻ 5ZQFE"SSBZ var arr = new
Uint32Array(10); // 32bit * 10elems
5ZQFE"SSBZ ɾKT ͷ "SSBZΦϒδΣΫτ ɾ$ݴޠͷΑ͏ͳ੩తͳྻ 5ZQFE"SSBZ ɾී௨ͷ "SSBZͰͰ͔͍ը૾ͷഎܠൈ͜͏ͱͨ͠ΒΫϥογϡͨ͠ var arr
= new Uint32Array(10); // 32bit * 10elems
8FC8PSLFST ɾը૾ॲཧ͍͍ͨͯ ΊͬͪΌ ॏ͍ ɾϝΠϯεϨουͰճ͢ͱ͓͠·͍ʹͳΔ
8FC8PSLFST var worker = new Worker(“worker.js”); worker.addEventListener(‘message’, (e) => {
switch(e.data.method) { case “finished”: onHogeFinished(); break; ... } }); worker.postMessage(“hoge”, args); self.addEventListener(‘message’, (e) => { switch(e.data.method) { case “hoge”: omoiShori(); self.postMessage(“finished”, args); break; } }); TDSJQUKT XPSLFSKT
ੜ KT ͰΰϦΰϦը૾ॲཧ ![LQIJ
͍͍ͧ