Javascript像素操作：这些不是'；这不是我的颜色_Javascript_Html_Image_Canvas

Javascript像素操作：这些不是'；这不是我的颜色

javascript html image canvas

Javascript像素操作：这些不是'；这不是我的颜色,javascript,html,image,canvas,Javascript,Html,Image,Canvas,我知道像这样的问题已经被问过好几次了，但我还没有找到我想要的。我正在将图像读入画布对象（javascript）中，并尝试操作一些特定的像素。例如，我正在寻找颜色RGB:224 64 102，并尝试将其更改为其他颜色我可以将灰度应用于图像，因此我知道操作是有效的，但是代码没有找到任何具有这种颜色的像素（Adobe Illustrator说是RGB颜色）。我希望我只是错过了一个小细节。代码如下，希望有人能看到谢谢 var canvas = document.getElementById("tes

我知道像这样的问题已经被问过好几次了，但我还没有找到我想要的。我正在将图像读入画布对象（javascript）中，并尝试操作一些特定的像素。例如，我正在寻找颜色RGB:224 64 102，并尝试将其更改为其他颜色

我可以将灰度应用于图像，因此我知道操作是有效的，但是代码没有找到任何具有这种颜色的像素（Adobe Illustrator说是RGB颜色）。我希望我只是错过了一个小细节。代码如下，希望有人能看到

谢谢

var canvas = document.getElementById("testcanvas");
            var canvasContext = canvas.getContext('2d');


            imgObj = new Image();
            imgObj.src = "ss.jpg";
            //imgObj.width = 200;
            //imgObj.height = 200;
            var imgW = imgObj.width;
            var imgH = imgObj.height;
            canvas.width = imgW;
            canvas.height = imgH;
            canvasContext.drawImage(imgObj, 0, 0);

            var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

            //hash_table = {};

             for (var x = 0; x < imgPixels.width; x++) {
                for (var y = 0; y < imgPixels.height; y++)
                    {
                   var i = (y * imgPixels.width + x) * 4;
                     //Want to go from:
                     //E04066
                     //224 64 102 -> to
                     //134 135 185

                     if(imgPixels.data[i] == 224 && imgPixels.data[i+1] == 64 && imgPixels.data[i+2] == 102) {
                        imgPixels.data[i] = 134;
                        imgPixels.data[i+1] = 135;
                        imgPixels.data[i+2] = 185;
                     }

                     //To greyscale:
                     /*
                     var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                     imgPixels.data[i] = avg;
                     imgPixels.data[i + 1] = avg;
                     imgPixels.data[i + 2] = avg;
                     imgPixels.data[i + 3] = 255;
                    */
                }
            }
            canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
            //color_count = 0;
            //for(key in hash_table) {
            //  color_count++;
            //}
            //console.log(color_count);
            //console.log(hash_table);
            return canvas.toDataURL();

        });
});

</script>
</head>
<body>
    <canvas id="testcanvas"></canvas>

<img src="ss.jpg" id="testimage"/>

var canvas=document.getElementById（“testcanvas”）；
var canvasContext=canvas.getContext（'2d'）；
imgObj=新图像（）；
imgObj.src=“ss.jpg”；
//imgObj.宽度=200；
//imgObj.高度=200；
var imgW=imgObj.宽度；
var imgH=imgObj.高度；
canvas.width=imgW；
canvas.height=imgH；
drawImage（imgObj，0,0）；
var imgPixels=canvasContext.getImageData（0,0，imgW，imgH）；
//哈希_表={}；
对于（var x=0；x至
//134 135 185
if（imgPixels.data[i]==224&&imgPixels.data[i+1]==64&&imgPixels.data[i+2]==102）{
imgPixels.data[i]=134；
imgPixels.data[i+1]=135；
imgPixels.data[i+2]=185；
}
//到灰度：
/*
var avg=（imgPixels.data[i]+imgPixels.data[i+1]+imgPixels.data[i+2]）/3；
imgPixels.data[i]=平均值；
imgPixels.data[i+1]=平均值；
imgPixels.data[i+2]=平均值；
imgPixels.data[i+3]=255；
*/
}
}
canvasContext.putImageData（imgPixels，0,0,0，imgPixels.width，imgPixels.height）；
//颜色计数=0；
//for（哈希表中的键）{
//颜色计数++；
//}
//控制台日志（颜色计数）；
//console.log（哈希表）；
返回canvas.toDataURL（）；
});
});

您可能无法从画布获取图像数据，因为画布已被跨源数据污染

如果该文件ss.jpg是本地文件，那么它将无法工作。我想是这样的

在SO上搜索canvas cross origin，或在Google上搜索更多信息。外面有很多。这里有一点解释：

以下是一个关于在服务器上启用它的站点：

否则，您的代码将正常工作。下面是将红色小点转换为绿色小点的相同代码：

Canvas确实不能使用

.JPG

格式。您必须使用任何图片编辑工具（如Photoshop）将图像转换为

.PNG

。您的代码运行良好。

我认为您正在加载一个尚未准备好绘制的图像。下面我已经更新了上面的代码，虽然我还没有测试它，但我觉得它可以把你带到某个地方

 var canvas = document.getElementById("testcanvas");
        var canvasContext = canvas.getContext('2d');


        imgObj = new Image();
        imgObj.src = "ss.jpg";
        //imgObj.width = 200;
        //imgObj.height = 200;
        var imgW = imgObj.width;
        var imgH = imgObj.height;
        imgObj.onload = function(){
           //Put the pixel manipulation code here;
           // This ensures the image has been loaded before it is accessed. 
        }

您是否尝试过使用all-（224 64 102）-映像？我有一个本地服务器正在运行（MAMP），该映像与HTML文件位于同一目录中。我没有收到错误消息，但这并不一定意味着这不是问题所在。如果我所理解的是真的，我就不能在本地完成这项工作，不管我是在本地主机下运行服务器。是这样吗？我很感激你的帮助，我想你说得一针见血。