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
81
[飛込] 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
120
[LT] ちょっと賢く酒を飲む
zk_phi
0
180
[LT] 渋谷発おすすめ散歩ルート
zk_phi
0
160
[LT] ビールじゃない話
zk_phi
0
220
今週末できるお手軽ビアテイスティング
zk_phi
1
95
[LT] ビールが面白い話・2
zk_phi
1
300
[LT] 早押しクイズが楽しい話
zk_phi
0
150
[LT] ビールがおもしろい話
zk_phi
2
170
[LT] OpenSCAD でキーボード設計
zk_phi
0
550
Other Decks in Programming
See All in Programming
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
210
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
9
5.6k
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
430
Elm Form Validation
bkuhlmann
0
500
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
Folding Cheat Sheet #3
philipschwarz
PRO
0
110
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
290
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
170
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Designing for Performance
lara
601
67k
Web development in the modern age
philhawksworth
201
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
We Have a Design System, Now What?
morganepeng
42
6.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Building Better People: How to give real-time feedback that sticks.
wjessup
353
18k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Visualization
eitanlees
135
14k
Fireside Chat
paigeccino
19
2.6k
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
͍͍ͧ