画布 - 更改网页上所有图像的颜色（例如，灰度）答案

【问题标题】：Canvas - Change the color of ALL images on a web page (to grayscale, for instance)画布 - 更改网页上所有图像的颜色（例如，灰度）
【发布时间】：2013-12-03 08:33:00
【问题描述】：

我使用画布更改网页上图像的颜色（本例为灰度）。但是，使用以下代码仅更改了最后一个图像。

但我想更改网页上所有图像的颜色

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script>
$(function(){

    var theImages = [];
    var myImages = [];
    var theChanged = [];

    theImages = document.getElementsByTagName("img");
    theChanged = document.getElementsByTagName("img");

    // create a temporary canvas to put the original image
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");

    for (var i=0; i <theImages.length; i++){

                    myImages[i] = theImages [i];
                    tempCtx.drawImage(myImages[i],myImages[i].width,myImages[i].height);

                    var newImage=new Image();
                    newImage.onload=function(){
                        // call function to replace red with green
                        recolorImage(newImage,i, theChanged);

                    }
                    newImage.src= myImages[i].src;
    }

    function recolorImage(img_to_change, number, img_changed){

        var newCanvas = document.createElement('canvas');
        var ctx = newCanvas.getContext("2d");
        var theWidth = img_to_change.width;
        var theHeight = img_to_change.height;

        newCanvas.width = theWidth;
        newCanvas.height = theHeight;

        // draw the image on the temporary canvas
        ctx.drawImage(img_to_change, 0, 0, theWidth, theHeight);

        // pull the entire image into an array of pixel data
        var imageData = ctx.getImageData(0, 0, theWidth, theHeight);

        // CHANGE OF THE COLOR PIXELS

         for (var y = 0; y < theHeight; y ++) {
           for (var x = 0; x < theWidth; x ++) {
                 offset = ((y*(theWidth*4)) + (x*4));

                 imageData.data[offset + 0] =  Math.round((imageData.data[offset + 0] +imageData.data[offset + 1] +imageData.data[offset + 2] )/3);
                 imageData.data[offset + 1] = imageData.data[offset + 0];
                 imageData.data[offset + 2] = imageData.data[offset + 0];
           } //for
         } //for
         // final of the CHANGE OF THE PIXEL COLOR

        //------------------------------------------------------------------------------------------------------------------
        // put the altered data back on the canvas  
        ctx.putImageData(imageData,0,0);

        // put the re-colored image back on the image
        var finalImag = img_changed[number-1];
        finalImag.src = newCanvas.toDataURL();
    }

}); // end $(function(){});
</script>

<body>
    <p>First Image</p>
    <img src="imagens_250x180/rosa.jpg" name="image0" width=250 height=180 ><br/>
    <p>Second Image</p>
    <img src="imagens_250x180/ricardina.jpg" name="image1" width=250 height=180 >
     <p>Third Image</p>
    <img src="imagens_250x180/manaus.jpg" name="image2" width=250 height=180 >
</body>
</html>

【问题讨论】：

你不能用使用css，有点像net.tutsplus.com/tutorials/html-css-techniques/…
见stackoverflow.com/questions/750486/…
我认为这里的主要问题是您在 newImage.onload 函数中引用了 i，这将异步完成它的工作。执行 onload 时，for 循环可能已完成，i 设置为最新索引 (theImages.length - 1)。请参阅我的答案以获取替代解决方案。

标签： javascript html image canvas

【解决方案1】：

我不太明白你的代码所做的一切，所以我重写了很多，以便我理解它并使其工作。您可能可以以此为起点，然后重写为您更容易理解的内容：

$(function(){
  var theImages = document.getElementsByTagName("img");

  for (var i=0; i <theImages.length; i++){
    var newImage=new Image();

    /*
    * Store the current index as the new image's id
    * since the onload function is async
    */
    newImage.id = i;        
    newImage.onload=function(){

      // Retrieve the correct index
      var i = this.id;

      // Get width and height
      var theWidth = theImages[i].width;
      var theHeight = theImages[i].height;

      // create a temporary canvas to put the original image
      var tempCanvas=document.createElement("canvas");
      var tempCtx=tempCanvas.getContext("2d");

      // Set width and height of the canvas
      tempCanvas.width = theWidth;
      tempCanvas.height = theHeight;

      // Draw the original in a temporary canvas
      tempCtx.drawImage(this, 0, 0, theWidth, theHeight);

      // pull the entire image into an array of pixel data
      var imageData = tempCtx.getImageData(0, 0, theWidth, theHeight);

      // CHANGE OF THE COLOR PIXELS
      for (var y = 0; y < theHeight; y ++) {
        for (var x = 0; x < theWidth; x ++) {
       offset = ((y*(theWidth*4)) + (x*4));
         imageData.data[offset + 0] =  Math.round((imageData.data[offset + 0] +imageData.data[offset + 1] +imageData.data[offset + 2] )/3);
         imageData.data[offset + 1] = imageData.data[offset + 0];
         imageData.data[offset + 2] = imageData.data[offset + 0];
        } //for
      } //for

      // put the altered data back on the canvas  
      tempCtx.putImageData(imageData,0,0);

      // Set the original image
      theImages[i].src = tempCanvas.toDataURL();

    }
    newImage.src = theImages[i].src;    

  }
}); // end $(function(){});

【讨论】：

谢谢，谢谢，谢谢。我之前尝试过使用一些类似的代码来解决这个问题。但它不起作用，因为我对函数 toDataURL() 不满意。然后我尝试对我的案例采用另一种代码。但是，这显然太晦涩难懂了。现在，它是清晰和简单的。再次：非常感谢。
不客气。您可以通过将匿名 onload-function 放在 for 循环之外来改进代码，如 here 所示。
我的程序在 Explorer 上运行良好，但在 Chrome 上却不行。我在 Chrome 设置中启用了 javscripts。
有人知道为什么会这样吗？
不，不是。它在我的设置上运行良好，我也使用 Chrome。也许您可以执行 console.log() 来找出它不起作用的原因。

【解决方案2】：

猜测它可能是由这个错字引起的：myImages[i] = theImages [i];。图片后面不能有空格。

【讨论】：