JS DOM编程艺术——HTML5—— JS学习笔记2015-7-23(第90天)

canvas

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>canvas灰度图模式</title>
<script src="scripts/modernizr.custom.64715.js"></script>
</head>

<body>
<h1>canvas</h1>
<img src="img/s2.jpg" id="avatar" title="jeffrey" alt="my avatar">


<script>
 function convertToGS(img){
    //存储原始的彩色版
     img.color = img.src;
     // 创建灰度版
     img.grayscale = createGSCanvas(img);

     img.onmouseover = function(){
         this.src = this.color;
     }
     img.onmouseout();
 }

 function createGSCanvas(img){

     var canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;

     var ctx = canvas.getContext("2d");
     ctx.drawImage(img,0,0);
     // getImageData 只能操作与脚本位于同一个区域中的图片
     var c = ctx.getImageData(0, 0, img.width, img.height);
     for (i=0; i<c.height; i++){
         for(j=0; j<c.width; j++){
             var x = (1*4)*c.width+(j*4);
             var r = c.data[x];
             var g = c.data[x+1];
             var g = c.data[x+2];
             c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
         }
     }

     ctx.putImageData(c,0,0,0,0, c.width, c.height);

     return canvas.toDataURL();
 }

 window.onload = function(){
     convertToGS(document.getElementById('avatar'));
 }
</script>
</body>
</html>

View Code

这个例子没有实现，作者在书中说了，需要上传到web服务器上才可以；