pacs html5,HTML5开发中PACS--HTML5图像处理

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

关于HTML5开发的PACS--HTML5图像处理

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

html页面主要代码：

javascript主要代码：

1 //注：在这代码之前canvas已经绘制过图像 此处省略

2 var canvas=$("#imageCanvas").get(0);

3 var context=canvas.getContext("2d");

4 canvas.οnmοusemοve=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 };