PACS--HTML5 Image Processing Based on HTML5 for regional medical mobile medical images (3) Image Scaling

Main html page code: <canvas id = "imageCanvas"> </canvas> javascript main code: Copy code 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; // in actual use, you need to obtain the relative position of the mouse in the element. In this way, you can directly obtain the clientX 8 oldY = event of the event. clientY; // you need to obtain the relative position of the mouse in the element in actual use. In this way, you can directly obtain the clientY 9 10}; 11 can Vas. onmouseup = function (event) {12 enabled = false; 13}; 14 canvas. onmousemove = function (event) {15 if (! Enabled) {16 return; 17} 18 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 clientX19 newY = event of the event. clientY; // in actual use, you need to obtain the relative position of the mouse in the element. In this way, you can directly obtain the clientY20 multipleImage (); 21 oldX = newX; 22 oldY = newY; 23}; 24 function multipleImage () {25 var multiple = (newX + newY)-(oldX + oldY); 26 // The image scales 27 context. transform (multiple, 0, 0, multiple, 0, 0); 28 context. drawImage (image); 29}