• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例7-13 使用getlmageData与putlmageData方法处理图像像

实例7-13 使用getlmageData与putlmageData方法处理图像像

1.功能描述

在页面中,新建一个<canvas>元素。第一次单击该元素时,在画布中绘制一幅图像,再次单击时处理该图像的像素,以反色彩的形式在画布中重新绘制图像。

2.实现代码

在DreamweaverCS5中新建一个HTML页面7-13.html,加入代码如代码清单7-13所示。

代码清单7-13 使用getlmageData与putlmageData方法处理图像像素

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>使用getlmageData与putlmageData方法处理图像像</title>
	<link href="Css/css7.css" rel="stylesheet" type="tcxt/css">
	<script type="tcxt/javascript" language="jscript"
	       src="Js/jsl3.js"/>
	</script>
	</head>
	<body>
	<canvas id="cnvMain" width="28Opx" height="190px"
	       onCIick="cnvclick(this);">
	</canvas>
	</body>
	</html>

在代码清单7-13中,页面导入一个JavaScript文件jsl3.js,其中自定义一个函数cnvclick(),该函数在单击画布时被调用。其实现的代码如下所示:

	//JavaScript Document
	//定义保存单击次数的全局变量
	var intNum=0;
	//自定义单击画布函数
	function cnvclick(env){
	    intNum+=1;
	    intNum=(intNum==3)?1:intNum;
	    var cxt=env.getContcxt("2d");
	    var objImg=new Image();
	    objlmg.src="Images/2010年作品一1.jpg";
	    varintX=cnv.width/2-objImg.width/2;
	    varintY=cnv.height/2-objImg.height/2;
	    objImg.onload=function(){
	        switch(intNum){
	        case 1:
	            cxt.drawlmage(objImg,intX,intY);
	            break;
	        case 2:
	            dealPixel(cxt,objImg,intX,intY);
	            break:
	        }
	    }
	}
	//根据相关参数处理绘制图形像素
	function dealPixel(cxt,objImg,intx,intY){
	    var ImgData=cxt.getlmageData(intX,intY,objImg.width,objImg.height);
	    for(var intl=0;intI<ImgData.data.length;intI+=4){
	          ImgData.data[intl+O]=255-ImgData.data[intl+O];
	          ImgData.data[intl+l]=255-ImgData.data[inti+2];
	          ImgData.data[intI+2]=255-ImgData.data[intl+l]
	    }
	    cxt.putlmageData(ImgData,intx,intY);
	}

3.页面效果

该页面在Chrome10浏览器中执行后的页面效果如图7-16所示。

图7-16 使用getlmageData与putlmageData方法处理图像像素

4.源码分析

在本实例的JavaScript代码中,当画布被单击时触发onClick()事件,在该事件中,调用自定义的函数crwclick()。在该函数中,首先累计画布被单击的次数,将结果保存至变量intNum中;另外,创建一个Image对象,并设置对象加载路径。然后,分别计算cnv.width/2-objImg.width/2与cnv.height/2-objImg.height/2的值,用于获取绘制图像居中时左上角的坐标位置,并将计算后的结束值保存至变量intX与intY中。

在图像加载过程中,第一次单击画布时,调用drawlmage()方法,在画布中绘制一个居中的图像。第二次单击画布时,调用自定义的函数dealPixel(),该函数先通过变量ImgData获取绘制图像的全部像素区域,然后,按步长为4的方式遍历ImgData对象中的每个像素值,将每个像素位设置为255减去当前的值,从而获取反向的色值。完成遍历后,使用putImageData()方法将处理后的图像像素重新绘制到画布中的指定位置,详细实现过程如代码中加粗部分所示。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101