<!DOCTYPE html>
<html>
<head>
<style>
img {
hieght: 128px;
width: 128px
}
</style>
</head>
<body>
<img id="image1" src="image5.png">
<img id="image2" src="image3.jpg">
<form method="post" id="new">
<input type="submit">
</form>
</body>
<script>
function rgba2hex(orig) {
rgb = orig.replace(/s/g, '').match(/^rgba?((d+),(d+),(d+),?([^,s)]+)?/i),
hex = rgb ? (rgb[1] | 1 << 8).toString(16).slice(1) + (rgb[2] | 1 << 8).toString(16).slice(1) + (rgb[3] | 1 << 8).toString(16).slice(1) : orig;
a = (rgb[4] | 1 << 8).toString(16).slice(1)
hex = hex + a;
return hex;
}
var element = document.getElementById("new");
var imageArray = document.querySelectorAll('img');
var img1A = [];
var cA = [];
var ctxA = [];
for (n = 0; n < imageArray.length; n++) {
cA[n] = document.createElement("canvas");
ctxA[n] = cA[n].getContext('2d');
img1A[n] = new Image();
img1A[n].src = imageArray[n].src;
img1A[n].onload = pixelate(cA[n], ctxA[n], img1A[n], n, imageArray[n]);
function pixelate(c, ctx, img1, n, imageX) {
imageX.remove();
w = 128;
h = 128;
c.width = w;
c.height = h;
ctx.drawImage(imageX, 0, 0);
var pixelArr = ctx.getImageData(0, 0, w, h).data;
sample_size = 4;
var log = {};
for (let y = 0; y < h; y += sample_size) {
log[y / 4] = {};
for (let x = 0; x < w; x += sample_size) {
let p = (x + (y * w)) * 4;
ctx.fillStyle = "rgba(" + pixelArr[p] + "," + pixelArr[p + 1] + "," + pixelArr[p + 2] + "," + pixelArr[p + 3] + ")";
ctx.fillRect(x, y, sample_size, sample_size);
log[y / 4][x / 4] = "#" + rgba2hex("rgba(" + pixelArr[p] + "," + pixelArr[p + 1] + "," + pixelArr[p + 2] + "," + pixelArr[p + 3] + ")");
}
}
var hexJson = {};
hexJson.pixel_json = {};
for (a in log) {
for (b in log[a]) {
var hex = log[a][b];
var coord = {};
coord.x = parseInt(b);
coord.y = parseInt(a);
if (hexJson.pixel_json[hex] == null) {
hexJson.pixel_json[hex] = []
}
hexJson.pixel_json[hex].push(coord);
}
}
var para = document.createElement("input");
para.name = "pixelData" + n;
para.type = "hidden";
para.value = JSON.stringify(hexJson);
element.appendChild(para);
let img2 = new Image();
img2.src = c.toDataURL("image/png");
img2.width = 128;
document.body.appendChild(img2);
};
}
</script>
</html>
This keeps returning pixel data that is just empty values I think it’s because the image is not loading before hand but I have to pass info into the function and idk if that is why it’s causing that.
I have tried multiple ways of formatting it but I don’t think that’s the issue and I cant find any topics that go into this specifically.
What I want is there to be a 32x32 pixel data for each that is not just empty values.