【DOM编程艺术】Canvas将彩色图片变成灰度图片

function convertToGS(img) {
  if (!Modernizr.canvas) return;
  
  img.color = img.src;
  img.grayscale = createGSCanvas(img);
  
    img.onmouseover = function() {
      this.src = this.color;
    } 
    img.onmouseout = function() {
         this.src = this.grayscale; 
     }
     
     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);
    
    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 = (i*4) * c.width + (j*4);
            var r = c.data[x]; 
            var g = c.data[x+1]; 
            var b = 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'));
}

注意：在从图片之类的文件中读取数据时，不同浏览器有不同的安全考虑。为了保证这个例子正常运行，必须在同一个站点中提供图片和文档。而且，就算在本地硬盘中使用file协议加载这个页面，例子也无法运行。虽然可以修改

浏览器的安全设置，但还是建议把这个例子的相关文件都上传到web服务器中。