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

html页面主要代码： 

 

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

 javascript主要代码：

 

复制代码

 1  

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

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

 4 var oldX,oldY,newX,newY;

 5 var enabled=false;

 6 canvas.onmousedown=function(event){

 7      enabled=true;

 8     oldX = event.clientX;//实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientX

 9     oldY = event.clientY;//实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientY

10      

11 };

12 canvas.onmouseup=function(event) {

13      enabled = false;

14 };

15 canvas.onmousemove=function(event) {

16     if (!enabled) {

17         return;

18     }

19     newX=event.clientX;//实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientX

20     newY=event.clientY;//实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientY

21     moveImage();

22     oldX=newX;

23     oldY=newY;

24 };

25 function moveImage(){

26     var moveX=(newX - oldX);

27     var moveY=(newY - oldY);

28     

29     

30     //图像移动

31     context.transform(1,0,0,1,moveX,moveY);

32     context.drawImage(image);

33 

34 }