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

区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(5)图像旋转

程序员文章站 2022-05-17 23:31:13
仅提供参考和学习,代码仅为了指明个思路,转载请注明出处。   要查看此更多的图像处理功能请参考:   区域医疗移动医疗影像解决方案--基于html5的pacs--html5图像处...
仅提供参考和学习,代码仅为了指明个思路,转载请注明出处。

 

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

 

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

 

 

 

 

 

html页面主要代码: 

 

<canvas id="imagecanvas" ></canvas>

javascript主要代码:

 

复制代码

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

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

 3  var oldx,newx;

 4  var enabled=false;

 5  canvas.onmousedown=function(event){

 6      enabled=true;

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

 8       

 9  };

10  canvas.onmouseup=function(event) {

11       enabled = false;

12  };

13  canvas.onmousemove=function(event) {

14      if (!enabled) {

15          return;

16      }

17      newx=event.clientx;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientx

18      rotationimage();

19      oldx=newx;

20  };

21  //此函数是任何角度旋转

22  function rotationimage(){

23      var degree=(this.newx - this.oldx);//用x轴移动的距离表示旋转的度数。

24      //由于javascript中的函数math.cos 和  math.sin 所涉及的参数是指的“弧度”而非“角度”,

25      //所以要把弧度转换成角度  转换公式 :弧度=度×π/180° 

26      degree=degree*math.pi / 180;//把度转换为弧度

27      //图像旋转

28      context.transform(math.cos(degree),math.sin(degree),-math.sin(degree),math.cos(degree),0,0);

29      context.drawimage(image);

30  }

31  //按照运算公式,如果向右旋转90度着为:transform(0,1,-1,0,0,0);

32  //向左旋转90度为:transform(0,-1,1,0,0,0);

33  //旋转180度为:哈哈自己算吧。。。。。

复制代码

到此关于怎么进行图像移动,图像缩放,图像水平翻转,图像垂直翻转,图像旋转等功能在(1)-(5)章节中已经讲解完毕,但是在前面4个章节中就有人发邮件问过我怎么进行图像连续变化,即在图像移动或缩放的基础上在进行图像的旋转变化。。。在第(6)章节中将会单独的讲解下图像的叠加变换(其实也很简单也就是矩阵的运算,现在懒得写了,找时间在单独说下吧)。