異次元ワープロ2号機

他のブログに当てはまらない「その他」カテゴリ用ブログです。

小ネタ:Canvasに含まれる色を調べる関数

function colorOfAllPixel(canvas){
	var r,g,b;
	var index;
	var colorstr;
	var ret="";
	const pixel=canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height).data;
	for(index=0;index<pixel.length;index+=4){
		r=pixel[index];
		g=pixel[index+1];
		b=pixel[index+2];
		colorstr=`${r},${g},${b} #${zeroPadding(r.toString(16),2)}${zeroPadding(g.toString(16),2)}${zeroPadding(b.toString(16),2)}<br>`;
		if(ret.search(colorstr)<0) ret+=colorstr;
		if(ret.length>5000){
			ret+="...<br>";
			break;
		};
	};
	return ret;
};

//おまけ:0で桁揃えする関数
function zeroPadding(str,len){
	return ("0".repeat(len)+str).substring(String(str).length);
};

色の数が少ないイラストなどに適しています。写真などには適していません。

colorOfAllPixel(Canvasオブジェクト)の形で呼び出すと、下のような形式で返します。
応答なし状態を防止するため、戻り値が5000文字を超えると列挙を中断して『...』を加えた状態で返します。
気に入らない場合は直接いじってください。

0,128,0 #008000<br>
248,248,248 #f8f8f8<br>
0,0,0 #000000<br>
216,216,216 #d8d8d8<br>
32,32,32 #202020<br>
160,232,56 #a0e838<br>
128,200,32 #80c820<br>

※brタグは本当にタグのまんまで入ってます。
(適当なdivの中に流し込むと表示できます。)


最初はxとyでループして各ピクセルごとにgetImageDataを調べてたけど、よく考えたら全部まとめて行けるので直しました。