为多个图像添加 HTML5 Canvas 黑白效果答案

【问题标题】：add HTML5 Canvas b&w effect to more than one image为多个图像添加 HTML5 Canvas 黑白效果
【发布时间】：2011-12-22 16:27:33
【问题描述】：

我想使用 HTML5 Canvas Black 创建一个画廊来实现悬停效果，但是我遇到了一些麻烦。

我可以使效果在一个元素上完美工作，但我似乎无法让它在多个元素上工作。

这是我所拥有的：

(function() {  
      var supportsCanvas = !!document.createElement('canvas').getContext;  
      supportsCanvas && (window.onload = greyImages);  

      function greyImages() {  
          var ctx = document.getElementsByTagName("canvas")[0].getContext('2d'),  
              img = document.getElementById("cvs-src"),  
              imageData, px, length, i = 0,  
              grey;  

          ctx.drawImage(img, 0, 0);  

          // Set 500,500 to the width and height of your image.  
          imageData = ctx.getImageData(0, 0, 378, 225);  
          px = imageData.data;  
          length = px.length;  

          for ( ; i < length; i+= 4 ) {  
              grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;  
              px[i] = px[i+1] = px[i+2] = grey;     
           }

          ctx.putImageData(imageData, 0, 0);  
      }  
  })();

HTML：

<article id="respond" class="first">
    <a href="gitano.php" rel="#overlay" style="text-decoration:none">
        <img id="cvs-src" src="images/thumbnails/regular/gitano.png" />  
        <canvas width=378 height=225></canvas> 
        <div class="caption">
            <p><img class="enlarge" src="images/enlarge.png"/>Click To <em>View Project</em></p>
        </div>
    </a>    
</article>

CSS：

   figure article img {
width: 100%;
padding: 0;
margin: 0;
border: 0;
vertical-align:bottom;
   }

   figure article:hover img {
display: block;
   }

   figure article canvas {
width: 100%;
padding: 0;
margin: 0;
border: 0;
position: absolute;  
left: 0;  
top: 0;  
opacity: 1;  
-webkit-transition: all 1s;  
-moz-transition: all 1s;  
-o-transition: all 1s;  
-ms-transition: all 1s;  
transition: all 1s;
    }  

    figure article canvas:hover {  
        opacity: 0;  
    }

【问题讨论】：

我在webdesignerwall.com/tutorials/html5-grayscale-image-hover 上找到了一个脚本，该脚本将画布应用于多个图像，这很好，但不太适合我的需要。我真的需要两者之间的某种混合。如何使用 WDW 使用的相同技术来获取图像的 src 并将画布应用于该图像，但使用上面的脚本？

标签： javascript image html css html5-canvas

【解决方案1】：

您似乎只将其应用于此处的一个画布：

var ctx = document.getElementsByTagName("canvas")[0].getContext('2d')

您正在获取第一个画布 ([0]) 并获取其上下文。也许这样会更好：

var canvases = document.getElementsByTagName("canvas");
for (var j = 0; j < canvases.length; j ++) {
  var ctx = canvases[j].getContext('2d'),  
      img = document.getElementById("cvs-src"),  
      imageData, px, length, i = 0,  
      grey;  
  // and so on...
}

【讨论】：