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

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

我可以将灰度应用于图像，所以我知道操作有效，但代码没有找到具有此颜色的任何像素（即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"/>

来源

2012-02-11 The Green Pizza

您是否尝试过使用all-（224 64 102）-image？ – zambotn 2012-02-11 00:33:27

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

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

在SO或Google上搜索画布交叉来源以获取更多相关信息。那里有很多东西。这里有一点的解释：

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

这里有一个网站有关启用它的服务器上：

http://enable-cors.org/

否则，你的代码工作。下面是相同的代码转换一个小红点变成一个小绿点：

http://jsfiddle.net/RBaxt/

来源

2012-02-11 00:37:18

我有一个本地服务器运行（MAMP）与HTML文件在同一目录中的图像。我没有收到错误消息，但这并不一定意味着这不是问题。如果我的理解是真实的，那么无论我在本地主机下运行服务器，我都无法在本地执行此操作。是这样吗？我感谢你的帮助，我认为你一定会对你有所帮助。 – 2012-02-11 05:31:21

帆布真的不.JPG格式工作。您必须使用Photoshop等任何图片编辑工具将图片转换为.PNG。你的代码运行良好。

来源

2013-03-14 06:03:02

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

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

来源

2015-01-14 11:14:50

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

回答

相关问题