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

浏览数：17 / 时间：2015年06月11日

仅提供参考和学习，代码仅为了指明个思路，转载请注明出处。

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

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

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 }