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

ダーシノ

April 18, 2019
Tweet

More Decks by ダーシノ

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. このスライドの内容
    1. Canvas APIの使い方
    2. 画像処理の方法
    3. 画像処理アルゴリズムと用途
    1. 二値化
    2. ガンマ補正
    3. シャープ化
    4. メディアンフィルタ
    5. モザイク
    4. 画像処理の応用

    View full-size slide

  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';

    View full-size slide

  5. 画像データの加工
    const imageData = ctx.getImageData(
    0, 0,
    canvas.clientWidth, canvas.clientHeight
    );
    let data = imageData.data;
    ctx.putImageData(imageData, 0, 0);

    View full-size slide

  6. ImageData.data
    1px毎のRGBAが一次元配列として入っている
    例: [r, g, b, a, r, g, b, a, …]
    走査して画像処理を行う
    canvas.width×4
    canvas.height×4

    View full-size slide

  7. 画像処理の方法
    1. Canvasからピクセルデータを取得
    2. ピクセルデータを加工
    3. 加工済みピクセルデータをCanvasに描画

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. シャープ化
    エッジ(輪郭)を検出・強調するフィルター
    画像のボケやブレを解消する
    [
    −1 −1 −1
    −1 10 −1
    −1 −1 −1
    ]
    周囲9ピクセルにそれぞれ係数をかけた値を合計
    最後に2で割る

    View full-size slide

  12. メディアンフィルタ
    輪郭を残したままノイズを除去するフィルター
    画像処理の前処理に使われる
    S S S
    S S S
    S S S
    sorted = [r1,r2,...,r9] . sort()
    median = ⌊sorted . length ÷ 2⌋
    r = sorted[median]

    View full-size slide

  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のブロック内の
    平均値で塗りつぶす

    View full-size slide

  14. 画像処理の応用
    バーコードリーダー
    ・ シャープ化
    ・ 二値化
    動体検知
    ・ メディアンフィルタ
    ・ モザイク

    View full-size slide

  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

    View full-size slide