PACS--HTML5 Image Processing Based on HTML5 for regional medical mobile medical images (5) image rotation

Only provides reference and learning. The code is only used to specify a train of thought. For more information, see the source. To view more image processing functions of this system, see: Regional Medical mobile medical imaging solution-HTML5-based PACS--HTML5 image processing html page main code: <canvas id = "imageCanvas"> </canvas> javascript code: Copy code 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; // obtain the relative position of the mouse in the element in actual use. In this case, the clientX 8 9} of the event is obtained directly. 10 canvas. onmouseup = functi On (event) {11 enabled = false; 12}; 13 canvas. onmousemove = function (event) {14 if (! Enabled) {15 return; 16} 17 newX = event. clientX; // in actual use, you need to obtain the relative position of the mouse in the element. In this way, you can directly obtain the clientX18 rotationImage (); 19 oldX = newX; 20} of the event }; 21 // this function is rotating 22 function rotationImage () {23 var degree = (this. newX-this. oldX); // use the distance from the X axis to indicate the degree of rotation. 24 // because of the Math Function in javascript. cos and Math. the parameters involved in sin refer to the "radians" instead of the "angle", 25 // so convert radians into angle conversion formulas: radians = degrees × π/180 ° 26 degree = degree * Math. PI/180; // converts degrees to radians 27 // The image rotates 28 context. transform (Math. cos (degree), Math. sin (degree),-Math. sin (degree), Math. cos (degree), 0, 0); 29 context. drawImage (image); 30} 31 // according to the calculation formula, if the right rotation is 90 degrees: transform ); 32 // rotate to the left 90 degrees: transform (0,-180, 0, 0); 33 // rotate degrees: Haha, you can calculate it ..... Copy the code to this topic to explain how to move an image, scale the image, flip the image horizontally, flip the image vertically, rotate the image, and so on. (1)-(5, however, in the previous four chapters, someone sent an email asking me how to perform continuous image changes, that is, rotating Images Based on moving or scaling... In section (6), we will explain the superposition transformation of images separately (in fact, it is also very simple, that is, the calculation of the matrix. I am too lazy to write it now. Let's talk about the time separately ).