Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Canvas APIを使った 画像処理 入門 ダーシノ(@bc_rikko)
Slide 2
Slide 2 text
フィルタはかせ 画像処理する人、嫌いなフィルタはモザイク レナ・ソーダバーグさん 画像処理される人、全身写真はちょっとアレ 登場人物
Slide 3
Slide 3 text
このスライドの内容 1. Canvas APIの使い方 2. 画像処理の方法 3. 画像処理アルゴリズムと用途 1. 二値化 2. ガンマ補正 3. シャープ化 4. メディアンフィルタ 5. モザイク 4. 画像処理の応用
Slide 4
Slide 4 text
画像の読み込み 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';
Slide 5
Slide 5 text
画像データの加工 const imageData = ctx.getImageData( 0, 0, canvas.clientWidth, canvas.clientHeight ); let data = imageData.data; ctx.putImageData(imageData, 0, 0);
Slide 6
Slide 6 text
ImageData.data 1px毎のRGBAが一次元配列として入っている 例: [r, g, b, a, r, g, b, a, …] 走査して画像処理を行う canvas.width×4 canvas.height×4
Slide 7
Slide 7 text
画像処理の方法 1. Canvasからピクセルデータを取得 2. ピクセルデータを加工 3. 加工済みピクセルデータをCanvasに描画
Slide 8
Slide 8 text
画像処理アルゴリズム 1. 二値化 2. ガンマ補正 3. 輪郭強調 4. メディアンフィルタ 5. モザイク
Slide 9
Slide 9 text
二値化 白黒はっきりさせるフィルター 文字認識やバーコードリーダーとかで使われる threshold = 128 avg = (r+g+b)/3 r = g = b = avg>threshold ? 255 : 0
Slide 10
Slide 10 text
ガンマ補正 彩度・輝度を補正するフィルター ディスプレイ上で自然の色に近く見えるようにする b = ( b 255 ) 1 γ × 255 γ = 2.0 g = ( g 255 ) 1 γ × 255 r = ( r 255 ) 1 γ × 255
Slide 11
Slide 11 text
シャープ化 エッジ(輪郭)を検出・強調するフィルター 画像のボケやブレを解消する [ −1 −1 −1 −1 10 −1 −1 −1 −1 ] 周囲9ピクセルにそれぞれ係数をかけた値を合計 最後に2で割る
Slide 12
Slide 12 text
メディアンフィルタ 輪郭を残したままノイズを除去するフィルター 画像処理の前処理に使われる S S S S S S S S S sorted = [r1,r2,...,r9] . sort() median = ⌊sorted . length ÷ 2⌋ r = sorted[median]
Slide 13
Slide 13 text
モザイク ブロック単位で不可逆変換するフィルター いろいろ隠したいときに使われる 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のブロック内の 平均値で塗りつぶす
Slide 14
Slide 14 text
画像処理の応用 バーコードリーダー ・ シャープ化 ・ 二値化 動体検知 ・ メディアンフィルタ ・ モザイク
Slide 15
Slide 15 text
参考サイト 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