JavaScript で画像の各ピクセルの色の取得する方法のメモ。
read_image() で画像を読み込み、画像を読み込み終えたら、
raw_image() でcanvas に画像を描画します。
そして、16 ピクセル x 16 ピクセル単位で色の平均値を計算し、
その色で枠を描画しています。
各ピクセルの r, g, b, a(透明度) は以下で取得することができます。
r = img_data.data[(x + y*w)*4];
g = img_data.data[1 + (x + y*w)*4];
b = img_data.data[2 + (x + y*w)*4];
a = img_data.data[3 + (x + y*w)*4];
read_image() で画像を読み込み、画像を読み込み終えたら、
raw_image() でcanvas に画像を描画します。
そして、16 ピクセル x 16 ピクセル単位で色の平均値を計算し、
その色で枠を描画しています。
各ピクセルの r, g, b, a(透明度) は以下で取得することができます。
r = img_data.data[(x + y*w)*4];
g = img_data.data[1 + (x + y*w)*4];
b = img_data.data[2 + (x + y*w)*4];
a = img_data.data[3 + (x + y*w)*4];
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>image processing</title>
</head>
<body>
画像処理
<div id="img_area"></div>
</body>
&;lt;script type="text/javascript">
(() => {
function draw_image(params) {
const img_area_obj = document.getElementById(params.img_area);
const img_obj = params.img_obj;
const cv_obj = document.createElement('canvas');
cv_obj.width = img_obj.naturalWidth;
cv_obj.height = img_obj.naturalHeight;
const ct = cv_obj.getContext('2d');
ct.drawImage(img_obj, 0, 0);
img_area_obj.appendChild(cv_obj);
const img_data = ct.getImageData(0, 0, img_obj.width, img_obj.height);
// 枠
draw_cell_frame(ct, img_data, 16);
}
function draw_cell_frame(ct, img_data, size) {
for (let y = 0; y < img_data.height; y += size) {
for (let x = 0; x < img_data.width; x += size) {
let avg_col = avg_cell_color(img_data, x, y, size);
ct.strokeStyle = `#${avg_col[0]}${avg_col[1]}${avg_col[2]}`;
ct.strokeRect(x, y, size, size);
}
}
}
function avg_cell_color(img_data, min_x, min_y, size) {
const w = img_data.width;
const h = img_data.height;
const max_x = min_x + size <= w ? min_x + size : w;
const max_y = min_y + size <= h ? min_y + size : h;
let sum_r = 0, sum_g = 0, sum_b = 0;
let pixels = 0;
for (let y = min_y; y < max_y; y++) {
for (let x = min_x; x < max_x; x++) {
pixels++;
let r = img_data.data[(x + y*w)*4];
let g = img_data.data[1 + (x + y*w)*4];
let b = img_data.data[2 + (x + y*w)*4];
sum_r += r;
sum_g += g;
sum_b += b;
}
}
const avg_r = Math.floor(sum_r / pixels);
const avg_g = Math.floor(sum_g / pixels);
const avg_b = Math.floor(sum_b / pixels);
return [avg_r.toString(16), avg_g.toString(16), avg_b.toString(16)];
}
function read_image(params) {
const img_obj = new Image();
params.img_obj = img_obj;
img_obj.onload = (() => {
draw_image(params);
});
img_obj.src = params.img_url;
}
read_image({
img_area: 'img_area',
img_url: 'test.png',
});
})();
</script>
</html>
