letanure · January 28, 2013 00:23
diff --git a/image-pb b/image-pb
 <!DOCTYPE html>  
 <html lang="pt-br">  
 <head>  
  <meta charset="utf-8">  
  <title>P&B</title>  
  <style>  
    .imageWrap {  
      width: 500px;  
      margin: 100px auto;  
      position: relative;  
      cursor: pointer;  
    }  
    canvas {  
      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;  
    }  
    canvas:hover {  
      opacity: 0;  
    }  
    #image-pb {  
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
    }  
    #image-pb:hover {  
      filter: none;  
    }  
  </style>  
 </head>  
 <body>  
  <div class="imageWrap">  
      <img id="image-pb" src="imagem.jpg" />  
      <canvas width="500" height="500"></canvas>  
  </div>  
  <script>  
    (function() {  
      var canvasSupport = !!document.createElement('canvas').getContext;  
      canvasSupport && (window.onload = pbImages);  
      function pbImages() {  
        var contextCanvas = document.getElementsByTagName("canvas")[0].getContext('2d'),  
        img = document.getElementById("image-pb"),  
        imgData, imgDataArr, length, i = 0,  
        grey;  
        contextCanvas.drawImage(img, 0, 0);  
        imgData = contextCanvas.getimgData(0, 0, 500, 500);  
        imgDataArr = imgData.data;  
        length = imgDataArr.length;  
        for ( ; i < length; i+= 4 ) {  
          grey = imgDataArr[i] * .3 + imgDataArr[i+1] * .59 + imgDataArr[i+2] * .11;  
          imgDataArr[i] = imgDataArr[i+1] = imgDataArr[i+2] = grey;  
        }  
        contextCanvas.putimgData(imgData, 0, 0);  
      }  
    })();  
  </script>  
 </body>  
 </html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="utf-8">
	<title>P&B</title>
	<style>
	.imageWrap {
	width: 500px;
	margin: 100px auto;
	position: relative;
	cursor: pointer;
	}
	canvas {
	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;
	}
	canvas:hover {
	opacity: 0;
	}
	#image-pb {
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	}
	#image-pb:hover {
	filter: none;
	}
	</style>
	</head>
	<body>
	<div class="imageWrap">
	<img id="image-pb" src="imagem.jpg" />
	<canvas width="500" height="500"></canvas>
	</div>
	<script>
	(function() {
	var canvasSupport = !!document.createElement('canvas').getContext;
	canvasSupport && (window.onload = pbImages);
	function pbImages() {
	var contextCanvas = document.getElementsByTagName("canvas")[0].getContext('2d'),
	img = document.getElementById("image-pb"),
	imgData, imgDataArr, length, i = 0,
	grey;
	contextCanvas.drawImage(img, 0, 0);
	imgData = contextCanvas.getimgData(0, 0, 500, 500);
	imgDataArr = imgData.data;
	length = imgDataArr.length;
	for ( ; i < length; i+= 4 ) {
	grey = imgDataArr[i] * .3 + imgDataArr[i+1] * .59 + imgDataArr[i+2] * .11;
	imgDataArr[i] = imgDataArr[i+1] = imgDataArr[i+2] = grey;
	}
	contextCanvas.putimgData(imgData, 0, 0);
	}
	})();
	</script>
	</body>
	</html>