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
750
Other Decks in Programming
See All in Programming
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
rage against annotate_predecessor
junk0612
0
170
為你自己學 Python - 冷知識篇
eddie
1
350
AIでLINEスタンプを作ってみた
eycjur
1
230
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
Reading Rails 1.0 Source Code
okuramasafumi
0
250
1から理解するWeb Push
dora1998
7
1.9k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
Improving my own Ruby thereafter
sisshiki1969
1
160
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
It's Worth the Effort
3n
187
28k
Agile that works and the tools we love
rasmusluckow
330
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
For a Future-Friendly Web
brad_frost
180
9.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Automating Front-end Workflow
addyosmani
1370
200k
Making Projects Easy
brettharned
117
6.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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
͍͍ͧ