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像素操作：這些不是我的顏色

回答

相關問題