基于HTML5的PACS--HTML5图像处理(1)放大镜效果

浏览数：31 / 时间：2015年06月09日

仅提供参考和学习，代码仅为了指明个思路，不经允许请不要随意转载。

要查看此系统更多的图像处理功能请参考：

区域医疗移动影像解决方案--基于HTML5的PACS--HTML5图像处理

放大镜效果：方便局部放大图像，能够更清楚的观察图像的细节。

html页面主要代码：

<canvas id="imageCanvas" ></canvas>

javascript主要代码：

 1 //注：在这代码之前canvas已经绘制过图像 此处省略
 2 var canvas=$("#imageCanvas").get(0);
 3 var context=canvas.getContext("2d");
 4 canvas.onmousemove=function(event) {
 5     
 6     var newX=event.clientX;//实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientX
 7     var newY=event.clientY;//实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientY
 8     //关于怎么获取鼠标在元素中的相对位置  再次不啰嗦了 不明白的就百度吧
 9     
10     var mul_w = 100, mul_h = 100,multiple=2;//放大镜的大小，和放大倍数
11     //获取原始图像的数据
12     var imgData=context.getImageData(newX-mul_w/multiple,newY-mul_h/multiple,mul_w,mul_h);
13     //新生成canvas对象并把获取的图像数据设置到新生成的canvas中
14     var c = document.createElement(‘canvas‘);
15     var ctx=c.getContext("2d");
16     c.width = mul_w;
17     c.height= mul_h;
18     ctx.putImageData(imgData,0,0);
19     ctx.strokeStyle="orange";
20     ctx.strokeRect(0,0,mul_w,mul_h);
21     //设置原始canvas的放大倍数 并把新的canvas画到原始图像中
22     context.setTransform(multiple,0,0,multiple,0,0);
23     context.drawImage(c, (this.newX-mul_w)/multiple,(this.newY-mul_h)/multiple);
24 };