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
170
[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
200
[LT] OpenSCAD でキーボード設計
zk_phi
0
730
Other Decks in Programming
See All in Programming
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
430
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
190
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
950
Create a website using Spatial Web
akkeylab
0
300
NPOでのDevinの活用
codeforeveryone
0
260
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
Team operations that are not burdened by SRE
kazatohiei
1
210
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
540
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Become a Pro
speakerdeck
PRO
28
5.4k
KATA
mclloyd
29
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
A Tale of Four Properties
chriscoyier
160
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Producing Creativity
orderedlist
PRO
346
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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
͍͍ͧ