区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(3)图像缩放

html页面主要代码： 

 

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

javascript主要代码：

 

复制代码

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

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

 3 var oldX,oldY,newX,newY;

 4 var enabled=false;

 5 canvas.onmousedown=function(event){

 6      enabled=true;

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

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

 9      

10 };

11 canvas.onmouseup=function(event) {

12      enabled = false;

13 };

14 canvas.onmousemove=function(event) {

15     if (!enabled) {

16         return;

17     }

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

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

20     multipleImage();

21     oldX=newX;

22     oldY=newY;

23 };

24 function multipleImage(){

25     var multiple=(newX + newY) - (oldX + oldY);

26     //图像缩放          

27     context.transform(multiple,0,0,multiple,0,0);

28     context.drawImage(image);

29 }