【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服务器中。