javascript - 图像处理/JavaScript

Question

我正在尝试编写一个 JavaScript 程序，通过在图像上放置三个垂直条纹来修改图像。左边三分之一是红色条纹，中间是绿色条纹，右边三分之一是蓝色条纹。

这是我试图实现的算法:1. 从您要更改的图像开始。

计算出图像的宽度。

对于图像中的每个像素:获取该像素的 x 坐标如果像素的 x 坐标小于图像宽度的三分之一，则将该像素的红色值设置为 255。如果像素的 x 坐标在图像宽度的三分之一到三分之二之间，则将该像素的绿色值设置为 255。如果像素的 x 坐标超过图像宽度的三分之二，则将像素的蓝色值设置为 255。

打印图像。

var MyImage = new SimpleImage("hilton.jpg");
var ImgWidth = MyImage.getWidth();

for (var pix of MyImage.values()){
    var Xcoordinate = pix.getX();
    var Ycoordinate = pix.getY();
    if (Xcoordinate < ImgWidth/3){
        pix.setRed(255);
    }

    else if (ImgWidth/3< Xcoordinate < ImgWidth/2){
        pix.setGreen(255);
    }

    else{ 
        Xcoordinate > ImgWidth/3;
        pix.setBlue(255);
    }
}
print(MyImage);

红色条纹按预期出现，但绿色条纹占据了图像的其余部分，而蓝色根本没有出现。没有错误消息。

Answer 1

我认为您对绿条的测试没有达到您想要的效果:

ImgWidth/3< Xcoordinate < ImgWidth/2

您不能以这种方式链接 bool 运算符。大概应该是:

ImgWidth / 3 < Xcoordinate && Xcoordinate < ImgWidth / 2 

这行也是多余的:

Xcoordinate > ImgWidth/3;

您没有将结果分配给任何变量。