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

Canvas APIを使った画像処理入門 / Image Processing Using Canvas API

Canvas APIを使った画像処理入門 / Image Processing Using Canvas API

Canvas APIの使い方から、画像処理の方法、フィルタのアルゴリズム、画像処理フィルタの応用例を紹介

Canvasを用いた9つの画像処理フィルターとそのアルゴリズムの解説
https://kuroeveryday.blogspot.com/2017/10/image-filters-with-canvas-algorithm.html

https://twitter.com/bc_rikko

6154244654c5f07cdf7c09da61bfe55f?s=128

ダーシノ

April 18, 2019
Tweet

Transcript

  1. Canvas APIを使った 画像処理 入門 ダーシノ(@bc_rikko)

  2. フィルタはかせ 画像処理する人、嫌いなフィルタはモザイク レナ・ソーダバーグさん 画像処理される人、全身写真はちょっとアレ 登場人物

  3. このスライドの内容 1. Canvas APIの使い方 2. 画像処理の方法 3. 画像処理アルゴリズムと用途 1. 二値化

    2. ガンマ補正 3. シャープ化 4. メディアンフィルタ 5. モザイク 4. 画像処理の応用
  4. 画像の読み込み const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const

    img = new Image(); img.addEventListener('load', e => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); }); img.src = ‘/path/to/rena.png';
  5. 画像データの加工 const imageData = ctx.getImageData( 0, 0, canvas.clientWidth, canvas.clientHeight );

    let data = imageData.data; ctx.putImageData(imageData, 0, 0);
  6. ImageData.data 1px毎のRGBAが一次元配列として入っている 例: [r, g, b, a, r, g, b,

    a, …] 走査して画像処理を行う canvas.width×4 canvas.height×4
  7. 画像処理の方法 1. Canvasからピクセルデータを取得 2. ピクセルデータを加工 3. 加工済みピクセルデータをCanvasに描画

  8. 画像処理アルゴリズム 1. 二値化 2. ガンマ補正 3. 輪郭強調 4. メディアンフィルタ 5.

    モザイク
  9. 二値化 白黒はっきりさせるフィルター 文字認識やバーコードリーダーとかで使われる threshold = 128 avg = (r+g+b)/3 r

    = g = b = avg>threshold ? 255 : 0
  10. ガンマ補正 彩度・輝度を補正するフィルター ディスプレイ上で自然の色に近く見えるようにする b = ( b 255 ) 1

    γ × 255 γ = 2.0 g = ( g 255 ) 1 γ × 255 r = ( r 255 ) 1 γ × 255
  11. シャープ化 エッジ(輪郭)を検出・強調するフィルター 画像のボケやブレを解消する [ −1 −1 −1 −1 10 −1

    −1 −1 −1 ] 周囲9ピクセルにそれぞれ係数をかけた値を合計 最後に2で割る
  12. メディアンフィルタ 輪郭を残したままノイズを除去するフィルター 画像処理の前処理に使われる S S S S S S S

    S S sorted = [r1,r2,...,r9] . sort() median = ⌊sorted . length ÷ 2⌋ r = sorted[median]
  13. モザイク ブロック単位で不可逆変換するフィルター いろいろ隠したいときに使われる S S S S S S S

    S S S S S S S S S S S r′ = 1 n n ∑ i=1 ri n×nのブロック内の 平均値で塗りつぶす
  14. 画像処理の応用 バーコードリーダー ・ シャープ化 ・ 二値化 動体検知 ・ メディアンフィルタ ・

    モザイク
  15. 参考サイト Canvasを用いた9つの画像処理フィルターと そのアルゴリズムの解説 https://kuroeveryday.blogspot.com /2017/10/image-filters-with-canvas-algorithm.html 基本的な画像処理手法について http://www.mis.med.akita-u.ac.jp/~kata/image/index-j.html