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>
这个例子没有实现，作者在书中说了，需要上传到web服务器上才可以；