ホーム > カテゴリ > HTML5・JavaScript >

画像を高品質に減色する「MedianCut.js」の使い方[公式]

画像をメディアンカットのアルゴリズムで減色する「MedianCut.js」の使い方です。減色は2色から256色まで任意の色数に減色可能です。

ブラウザがChromeの場合は、Chromeのセキュリティ仕様でローカルで実行するとエラーが発生します。回避策はサーバーにHTMLファイルをアップするか、エラー回避方法をご覧ください。

ダウンロード

MedianCut.js
ダウンロードの方法がわからない方はこちらからです。

使い方

サンプルコード

<script src="MedianCut.js"></script>
<button onclick="median(256);">Median Cut(256 colors)</button> 
<button onclick="median(64);">Median Cut(64 colors)</button> 
<button onclick="median(16);">Median Cut(16 colors)</button> 
<button onclick="median(2);">Median Cut(2 colors)</button> 
<p>[Original image]</p>
<img id="SrcImage" src="test.png">
<p>[High quality result]</p>
<canvas id="DstCanvas"></canvas>
<script>
  var src_img = document.getElementById("SrcImage");
  var dst_canvas = document.getElementById("DstCanvas");
  var dst_ctx = dst_canvas.getContext("2d");    
  
  function median(value){  
        
    // Drawing original image (元画像の描画)
    dst_canvas.width  = src_img.width;
    dst_canvas.height = src_img.height;        
    dst_ctx.drawImage(src_img,0,0); 
    
    // Generate ImageData (ImageDataの生成)
    var imagedata = dst_ctx.getImageData(0,0,dst_canvas.width,dst_canvas.height); 
    
    // Obtain color information of image (画像のカラー情報の取得)
    var colors = getColorInfo(imagedata);
    
    // reduced color (減色)
    var MedianCut = new TMedianCut(imagedata,colors);
    MedianCut.run(value,true);  
    
    // After Colors (減色後の画像の色数)
    alert(MedianCut.rep_color.length);
    
    // Draw to canvas (canvasへ描画)
    dst_ctx.putImageData(imagedata,0,0);
  }  
</script>

テスト用画像のtest.pngはこちらからダウンロード可能です。

関数

画像のカラー情報を取得する
関数function getColorInfo(imagedata)
引数imagedata: ImageDataオブジェクト
戻り値カラー情報のオブジェクト

コンストラクタ

クラスを生成
コンストラクタnew TMedianCut(imagedata,colors)
引数imagedata : ImageDataオブジェクト
colors : getColorInfo()の戻り値のオブジェクト
戻り値TMedianCutオブジェクト

メソッド

減色を実行する
メソッドTMedianCut.run(colorsize, update)
引数colorsize : 色数を指定する (2色 - 256色)
update : ピクセルデータを更新 (true or false)
戻り値なし

プロパティ

減色後の画像の色数を取得する
プロパティTMedianCut.rep_color.length
戻り値減色後の色数
備考正しく減色できているか、確認をする為のプロパティです。

応用

このまま関数を実行すると、JavaScriptはシングルスレッドですので重いです。そこで、HTML5の新機能であるWeb Workerを使用するとマルチスレッドで並列処理が可能です。

Web Workerの使い方はWeb Workerを使用してプログレスバーをマルチスレッドで動かすをご覧ください。





関連記事


前の記事：画像を高品質に拡大縮小する「resampling.js」の使い方[公式]
次の記事：GIFファイルを出力する「GIF.js」の使い方[公式]

公開日：2016年12月14日 最終更新日：2016年12月15日
記事NO：02228


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律