スポンサーリンク

画像のヒストグラムを表示する Chart.js JavaScript canvas

スポンサーリンク
HTML
スポンサーリンク

スポンサーリンク

概要

画像のヒストグラムをJavaScriptで算出してグラフとして表示してみます。

ヒストグラム算出のサンプルコード

ヒストグラムの表示にChart.jsを使っています。

インストール

npmを使っている場合は次のようにinstallします。

npm install chart.js

こちらを参考にしました。

Installation · Chart.js documentation

ヒストグラム表示クラス

import Chart from "chart.js"

export default class Histogram {
  /**
   * ヒストグラムを描画する
   * @param {Object} canvas 
   * @param {Object} data 
   */
  static renderHistogram(canvas, data) {
    let labels = new Array(data.length).fill('')
    new Chart(canvas, {
      type: 'bar',
      data:{
        labels,
        datasets: [
          {
            label: '画素値',
            data,
            backgroundColor: "rgba(80,80,80,0.5)"
          }
        ],
      },
      options: {
        title: {
          display: true,
          text: 'Histogram'
        },
        scales: {
          yAxes: [{
            ticks: {
              suggestedMin: 0,
            }
          }]
        },
        animation: {
          duration: 0
        }
      }
    })
  }
}

ヒストグラム算出

長さが255の配列を0で初期化し、各ピクセルのベクトルの数をカウントしています。
また、算出の前にrgbからグレイスケール画像に変換しています。

import Histogram
const grayscale = (r, g, b) => 0.2126 * r + 0.7152 * g + 0.0722 * b
// 略
let pixelValues = new Array(255).fill(0)
for (let i = 0; i < src.data.length; i += 4) {
    let gray = grayscale(src.data[i], src.data[i + 1], src.data[i + 2])
    gary = Math.floor(gray)
    pixelValues[gray]++
}
Histogram.renderHistogram(canvas, pixelValues)

デモ

こちらからデモを試せます。

画像処理100本ノックJS
画像処理100本ノックJS : 画像処理100本ノックにJavaSCriptで挑戦してみました。

出力結果

次のように出力されます。

参考

画像処理100本ノックJS
画像処理100本ノックJS : 画像処理100本ノックにJavaSCriptで挑戦してみました。
タイトルとURLをコピーしました