JavaScript像素操作：这不是我的颜色

Question

JavaScript像素操作：这不是我的颜色

3

我知道类似的问题已经被问了很多次，但我还没有找到我要找的东西。我正在将一个图像读入到canvas对象（在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"/>

- The Green Pizza

你尝试过使用全（224 64 102）图像吗？ - zambotn

3个回答

0

我认为你正在加载一个尚未准备好绘制的图像。下面是我更新过的代码，虽然我还没有测试它，但我觉得它可能会给你带来一些启示

 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. 
        }

- Richard Boyewa

0

Canvas无法使用.JPG格式。您需要使用任何图片编辑工具（如Photoshop）将图像转换为.PNG。您的代码运行良好。

- omer ali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

你可能无法从画布中获取图像数据，因为画布已被跨域数据污染。

如果文件ss.jpg是本地的，则不起作用。我想这就是情况。

在SO或Google上搜索有关画布跨域的更多信息。有很多资料可供参考。以下是一些解释：

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

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

http://enable-cors.org/

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

http://jsfiddle.net/RBaxt/