今天看H5代码的时候觉得转黑白照片的功能以后应该会经常用到，复制下来方便以后
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title> new document </title> 6 <script type="text/javascript"> 7 var canvas,ctx; 8 function btnConvertFun() 9 { 10 canvas = document.getElementById("myCanvas"); 11 var imgElement=document.getElementById("img"); 12 canvas.width=imgElement.width; 13 canvas.height=imgElement.height; 14 ctx = canvas.getContext("2d"); 15 imgElement.onload = function(){ 16 ctx.drawImage(imgElement, 0, 0); 17 imageConvertToGray(); 18 }; 19 imgElement.src="tyl.jpg"; 20 document.getElementById("btnSave").disabled=""; 21 } 22 //变灰 23 function imageConvertToGray() { 24 var length = canvas.width*canvas.height; 25 //通过 getImageData() 复制画布上指定矩形的像素数据 26 imgData = ctx.getImageData(0,0,canvas.width,canvas.height); 27 /* 28 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值： 29 R - 红色 (0-255) 30 G - 绿色 (0-255) 31 B - 蓝色 (0-255) 32 A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的) 33 color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。 34 */ 35 for(var i=0;i<length*4;i=i+4) 36 { 37 var myRed=imgData.data[i]; 38 var myGreen = imgData.data[i+1]; 39 var myBlue =imgData.data[i+2]; 40 //取3个平均值的灰态值 41 myGray = parseInt((myRed+myGreen+myBlue)/3); 42 imgData.data[i] = myGray; 43 imgData.data[i+1] = myGray; 44 imgData.data[i+2] = myGray; 45 46 } 47 //通过 putImageData() 将图像数据放回画布 48 ctx.putImageData(imgData,0,0); 49 50 } 51 </script> 52 </head> 53 54 <body> 55 <h1>将彩色照片转换成黑白照片</h1> 56 <img id="img" src="tyl.jpg"><br/> 57 <input type="button" id="btnConvert" onClick="btnConvertFun();"value="转换"> 58 <input type="button" id="btnSave" onclick="btnSaveFun();" value="保存" disabled> 59 <canvas id="myCanvas" width="200" height="100"> 60 </body> 61 </html>