Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

zk-phi

May 09, 2019
Tweet

More Decks by zk-phi

Other Decks in Programming

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. ͸͍͍ͧ