个人中心
gpt4 book ai didi

javascript - Canvas - 更改网页上所有图像的颜色(例如，灰度)

转载 作者：行者123 更新时间：2023-11-30 17:44:52 48 4
gpt4 key购买 nike

我使用 Canvas 更改网页上图像的颜色(本例为灰度)。但是，通过使用以下代码，仅更改了最后一张图像。

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

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

最佳答案

我不太理解您的代码所做的一切，所以我重写了很多代码，以便我理解它并使其发挥作用。您或许可以以此为起点，然后重写成您更容易理解的内容:

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

关于javascript - Canvas - 更改网页上所有图像的颜色(例如，灰度)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20340158/

48 4 0
文章推荐： c - 释放其分配区域之外的内存
文章推荐： c# - Aforge 和 Windows 窗体的内存堆叠问题
文章推荐： c++ - 运动不工作 ncurses 游戏
文章推荐： c# - OpenXML如何获取范围内的单元格
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com