利用Canvas编辑图片

使用<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 }