欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-19 17:46:54
html页面主要代码:    java...
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 }