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

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