大概流程非常简单,主要分为以下三个步骤:
二、图片处理实例
本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。
//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 可能上面代码写得不是很好,看起来也不是那么好理解,最好自己能够亲自写一写,这样对于自己理解会更加深刻一些。以上内容就是Canvas处理图片的方法,希望对大家有帮助。
可能上面代码写得不是很好,看起来也不是那么好理解,最好自己能够亲自写一写,这样对于自己理解会更加深刻一些。
以上内容就是Canvas处理图片的方法,希望对大家有帮助。