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を調べてたけど、よく考えたら全部まとめて行けるので直しました。