使用<canvas>对象在浏览器中把一幅彩色图片变成灰度图片。
grayscale.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Grayscale Canvas Example</title>
6 <script src="js/grayscale.js"></script>
7 </head>
8 <body>
9 <img src="images/bigben.jpg" id="bigben" title="BigBen" alt="My Bigben" />
10 </body>
11 </html>
grayscale.js文件：
1 /**
2 * Created by Administrator on 2017/1/6.
3 */
4 function convertToGS(img) {
5 //if(!Modernizr.canvas) return;
6 if(!document.createElement("canvas")) return false;
7 //存储原始的彩色版
8 img.color = img.src;
9
10 //创建灰度版
11 img.grayscale = createGSCanvas(img);
12
13 //在mouseover/out事件发生时切换图片
14 img.onmouseover = function () {
15 this.src = img.color;
16 }
17 img.onmouseout = function () {
18 this.src = img.grayscale;
19 }
20 img.onmouseout();
21
22 }
23
24 function createGSCanvas(img) {
25 var canvas = document.createElement("canvas");
26 canvas.width = img.width;
27 canvas.height = img.height;
28 var ctx = canvas.getContext("2d");
29 ctx.drawImage(img,0,0);
30
31 //getImageData只能操作与脚本位于同一个域中的图片
32 var c = ctx.getImageData(0,0,img.width,img.height);
33 for(var i=0;i<c.height;i++){
34 for(var j=0;j<c.width;j++){
35 var x = (i*4)*c.height+(j*4);
36 var r = c.data[x];
37 var g = c.data[x+1];
38 var b = c.data[x+2];
39 c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
40 }
41 }
42
43 ctx.putImageData(c,0,0,0,0,c.width,c.height);
44 return canvas.toDataURL();
45 }
46
47 window.onload = function () {
48 convertToGS(document.getElementById('bigben'));
49 }