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

<!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>

Answer 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(){});

Answer 2

猜测它可能是由这个错字造成的：myImages[i] = theImages [i];。在图像之后不应该有空格。

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

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

2 个答案: