教你使用Canvas处理图片的方法

　　//JavaScript

　　window.onload = function(){

　　var canvas = document.getElementById("canvas"), //获取Canvas画布对象

　　context = canvas.getContext('2d'); //获取2D上下文对象，大多数Canvas API均为此对象方法

　　var image = new Image(); //定义一个图片对象

　　image.src = 'imgs/img.jpg';

　　image.onload = function(){ //此处必须注意！后面所有操作均需在图片加载成功后执行，否则图片将处理无效

　　context.drawImage(image,0,0); //将图片从Canvas画布的左上角(0,0)位置开始绘制，大小默认为图片实际大小

　　var handle = document.getElementById("handle");

　　var create = document.getElementById("create");

　　handle.onclick = function(){ // 单击“处理图片”按钮，处理图片

　　var imgData = context.getImageData(0,0,canvas.width,canvas.height); //获取图片数据对象

　　var data = imgData.data; //获取图片数据数组，该数组中每个像素用4个元素来保存，分别表示红、绿、蓝和透明度值

　　var average = 0;

　　for (var i = 0; i < data.length; i+=4) {

　　average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //将红、绿、蓝色值求平均值后得到灰度值

　　data[i] = data[i+1] = data[i+2] = average; 将每个像素点的色值重写

　　}

　　imgData.data = data;

　　context.putImageData(imgData,0,0); //将处理后的图像数据重写至Canvas画布，此时画布中图像变为黑白色

　　};

　　create.onclick = function(){ // 单击“生成图片”按钮，导出图片

　　var imgSrc = canvas.toDataURL(); //获取图片的DataURL

　　var newImg = new Image();

　　var result = document.getElementById("result");

　　newImg.src = imgSrc; //将图片路径赋值给src

　　result.innerHTML = '';

　　result.appendChild(newImg);

　　};

　　};

　　};