使用Canvas处理图片的方法介绍

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

var dataURL = canvas.toDataURL(type, encoderOptions);

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<p id="result"></p>

//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);
 };
 };
};