使用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);

        };

    };

};