Javascript Pixel操作：这些不是我的颜色 [英] Javascript Pixel Manipulation: These aren't my colors

问题描述

我知道这样的问题已经被问了好几次，但我还没有找到我要找的东西。我正在读一个图像到canvas对象（在javascript中），并试图操纵一些特定的像素。例如，我正在寻找颜色RGB：224 64 102，并尝试将其更改为不同的颜色。

我可以对图像应用灰度，所以我知道操作工作，但代码是没有找到任何像素与这种颜色（Adobe Illustrator说是RGB颜色）。我希望我只是缺少一个小细节。

 <$ c $ 
 c> 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  for（var y = 0; y  
 var i =（y * imgPixels.width + x）* 4; 
 //想去：
 // E04066 
 // 224 64 102  - >到
 // 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] = 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_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.jpgid =testimage/> 
  

解决方案

您可能无法从画布中获取图片数据画布已被跨原始数据污染。

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

在SO或Google上搜索画布跨源的更多信息。有很多在那里。这里有一点解释：

http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules

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

http://enable-cors.org/

---

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

http://jsfiddle.net/RBaxt/

I know questions like this have been asked several time, but I have yet to find just what I'm looking for. I am reading an image into a canvas object (in javascript) and trying to manipulate some specific pixels. For example, I am looking for the color RGB: 224 64 102, and trying to change this to a different color.

I can apply greyscale to the image, so I know the manipulation works, but the code is not finding any pixels with this color (that Adobe Illustrator said was the RGB color). I'm hoping I'm just missing a small detail. The code is below, hopefully someone will see it.

Thanks!

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"/>

解决方案

You are probably unable to get image data from canvas because the canvas has been tainted by cross-origin data.

If that file, ss.jpg is local then it won't work. I imagine that's the case.

Search for canvas cross-origin on SO or Google for more information on that. There's a lot out there. Here's a bit of an explanation:

http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules

Here's a site about enabling it on your server:

http://enable-cors.org/

---

Otherwise, your code works. Here is the same code converting a tiny red dot into a tiny green dot:

http://jsfiddle.net/RBaxt/

这篇关于Javascript Pixel操作：这些不是我的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！