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
290
今週末できるお手軽ビアテイスティング
zk_phi
1
150
[LT] ビールが面白い話・2
zk_phi
1
370
[LT] 早押しクイズが楽しい話
zk_phi
0
230
[LT] ビールがおもしろい話
zk_phi
2
210
[LT] OpenSCAD でキーボード設計
zk_phi
0
730
Other Decks in Programming
See All in Programming
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
13k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.7k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.7k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
PipeCDのプラグイン化で目指すところ
warashi
1
280
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
920
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
180
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
4 Signs Your Business is Dying
shpigford
184
22k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How GitHub (no longer) Works
holman
314
140k
Producing Creativity
orderedlist
PRO
346
40k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Side Projects
sachag
455
42k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
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
͍͍ͧ