[飛込] jsでゴリゴリ画像処理

canvas と js で画像処理をするときの Tips 集を飛び込みで喋りました

Transcript

1. ੜ KT ͰΰϦΰϦը૾ॲཧ
2. Ұ࣌ظϋϚ͍ͬͯͨɿ
3. $BOWBT
   ͰṖΞϓϦ࣮૷
4. Ξχϝֆจࣈ δΣωϨʔλʔ
5. Ϋιίϥࢧԉ എܠൈ͖ଠ࿠ ࣸਅ
   ͺͨͦ͘
6. ͪͳΈʹ࠷ۙ͸ɿ
7. ੜ KT ͰΰϦΰϦը૾ॲཧ ![LQIJ
8. શ෦ੜ KT Ͱͨ͠ ɾഎܠ෼཭ HMPXDVU ɾHJG
   ΞχϝͷΤϯίʔυ ɾ
   FUD
9. ͍͔ͭ͘ 5JQT
   Λ঺հ
10. ը૾ΛಡΈࠐΉ
11. *NH λάͰ (&5 <img src=“https://hogehoge.com/piyopiyo.png” crossorigin> ɾDSPTTPSJHJO Λ͚ͭΔͱ $034
    Ͱ͖Δ ɾ$034͠ͳ͍ͱ DBOWBT
    ʹίϐʔͰ͖ͳ͍
12. ը૾ͷຊདྷͷαΠζΛ஌Δ var imageWidth = document.getElementById(“hoge”).naturalWidth; ɾOBUVSBM
    Λ͚ͭͳ͍ͱཁૉͷαΠζʹͳΔ
13. ը૾ͷੜσʔλΛೖख
14. ը૾ͷੜσʔλΛೖख 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 Ͱ഑ྻ͕औΕΔ
15. ੜσʔλͷϑΥʔϚοτ R G B A R G B A ……
16. ը૾ΛΰϦΰϦ͢Δ
17. ը૾ΛΰϦΰϦ͢Δ ɾΞϧΰϦζϜΛؤு࣮ͬͯ૷͢Δ ɾۭؒతʹ΋࣌ؒతʹ΋࣮ߦޮ཰͕ݫ͍͠
18. 5ZQFE"SSBZ ɾKT ͷ "SSBZ
    ͸ΦϒδΣΫτ ɾ$
    ݴޠͷΑ͏ͳ੩తͳ഑ྻ͸ 5ZQFE"SSBZ var arr = new Uint32Array(10); // 32bit * 10elems
19. 5ZQFE"SSBZ ɾKT ͷ "SSBZ
    ͸ΦϒδΣΫτ ɾ$
    ݴޠͷΑ͏ͳ੩తͳ഑ྻ͸ 5ZQFE"SSBZ ɾී௨ͷ "SSBZ
    ͰͰ͔͍ը૾ͷഎܠൈ͜͏ͱͨ͠ΒΫϥογϡͨ͠ var arr = new Uint32Array(10); // 32bit * 10elems
20. 8FC8PSLFST ɾը૾ॲཧ͸͍͍ͨͯ ΊͬͪΌ
    ॏ͍ ɾϝΠϯεϨουͰճ͢ͱ͓͠·͍ʹͳΔ
21. 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
22. ੜ KT ͰΰϦΰϦը૾ॲཧ ![LQIJ
23. ͸͍͍ͧ