像素操纵在某些图像上不起作用

Question

我试图使用像素操作仅从图像中提取白色文本，但它在某些图像上不起作用。它在https://prnt.sc/24q29qu但没有打开https://prnt.sc/24pymne请查看使用的代码，您可以将代码粘贴到控制台中以查看输出。在chrome浏览器上进行了测试。您可以单击控制台中的输出以查看图像输出。

var imageSource = document.querySelector("body > div.image-constrain.js-image-wrap > div > div > img")
var width = 2*imageSource.width;
var height = 2*imageSource.height;
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = imageSource.src;
var c = document.createElement("canvas")
c.width = width;
c.height = height;
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, width, height);
var data = imageData.data;
console.log(data);
// Replacing All the pixels except white
for (let i = 0; i < data.length; i += 4) {
if(data[i] != 255) {
data[i] = 0;
}
if(data[i+1] != 255) {
data[i+1] = 0;
}
if(data[i+2] != 255) {
data[i+2] = 0;
}
if(data[i+3] != 255) {
data[i+3] = 0;
}
}
console.log(imageData.data);  
ctx.putImageData(imageData, 0, 0);

img.src = c.toDataURL();
pixelatedImage = c.toDataURL();
console.log(pixelatedImage);

Answer 1

您的代码不是针对白色像素，而是针对非255的每个红-绿-蓝和Alpha通道，并将这些通道设置为0。

这意味着，如果你有一个红色的#FF0000像素，它将保持不变(红色是#FF(255(，因此不会成为目标，G&B已经是0，Alpha也是255，所以没有目标。

在您的图像中，绿色部分的绿色通道是255，因此它是无目标的。然而，它的红色通道既不是0也不是255，您可以看到绿色实际上发生了变化。

(async() => {
const resp = await fetch("https://i.ibb.co/ZKnmnT6/image.png");
if (!resp.ok) {
throw resp.status;
}
const blob = await resp.blob();
const image = await createImageBitmap(blob);
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
document.body.append(canvas);
const [r,g,b,a] = ctx.getImageData(0, 0, 1, 1).data;
console.log({r,g,b,a});
})().catch(console.error);

要以白色像素为目标，需要检查四个RGBA通道是否都是255，而不是一次一个。

(async() => {
const resp = await fetch("https://i.ibb.co/ZKnmnT6/image.png");
if (!resp.ok) {
throw resp.status;
}
const blob = await resp.blob();
const image = await createImageBitmap(blob);
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
document.body.append(canvas);
const img = ctx.getImageData(0, 0, image.width, image.height);
const imgdata = img.data;
for (let i = 0; i<imgdata.length; i+=4) {
if (
imgdata[i  ] !== 255 ||
imgdata[i+1] !== 255 ||
imgdata[i+2] !== 255 ||
imgdata[i+3] !== 255
) {
imgdata[i  ] =
imgdata[i+1] =
imgdata[i+2] =
imgdata[i+3] = 0;
}
}
ctx.putImageData(img, 0, 0);
})().catch(console.error);

但是，您可以通过在ImageData的.data上使用Uint32Array视图来将每个完整像素视为单个条目来实现这一点，白色像素将为0xFFFFFFFF(注意，如果您想针对其他颜色，现在的顺序是0xAAGGBBRR(。

(async() => {
const resp = await fetch("https://i.ibb.co/ZKnmnT6/image.png");
if (!resp.ok) {
throw resp.status;
}
const blob = await resp.blob();
const image = await createImageBitmap(blob);
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
document.body.append(canvas);
const img = ctx.getImageData(0, 0, image.width, image.height);
const imgdata = new Uint32Array(img.data.buffer);
for (let i = 0; i<imgdata.length; i++) {
if (imgdata[i] !== 0xFFFFFFFF) {
imgdata[i] = 0x00000000;
}
}
ctx.putImageData(img, 0, 0);
})().catch(console.error);