Effect:
JS Code:
<script>//initializing CANVAS01 and the context of the environment varCAV01 = document.getElementById (' cav01 ')); varcxt01 = Cav01.getcontext (' 2d '); //initializing CANVAS02 and the context of the environment varCav02 = document.getElementById (' cav02 ')); varcxt02 = Cav02.getcontext (' 2d '); //Initialize an Image object and scale varOimg =NewImage (); varScale ; Window.onload=function(){ //Set Picture PathOIMG.SRC = ' images/02.jpg '; //Set the width height of the main canvasCav01.width = 800; Cav01.height= 500; Oimg.onload=function(){ //set the height of the off-screen canvas to match the width of the original pictureCav02.width =Oimg.width; Cav02.height=Oimg.height; //Initialize the mouse down state and set the zoom ratio varIsmousedown =false; Scale= Cav02.width/cav01.width;//Draw the image to canvas, the second canvas is initially hiddenCxt01.drawimage (oimg, 0, 0, Cav01.width, cav01.height); Cxt02.drawimage (oimg,0, 0, Cav02.width, cav02.height); //Mouse down StateCav01.onmousedown =function(e) {//gets the coordinates of the mouse relative to the canvas varpos =Getmousepos (E.clientx,e.clienty); //block Mouse Default eventsE.preventdefault (); //calling the Draw Magnifier methodDrawfilterimg (true, POS); //set the Ismousedown tag to true;Ismousedown =true; } //Mouse Move StateCav01.onmousemove =function(e) {
//gets the coordinates of the mouse relative to the canvas varpos =Getmousepos (E.clientx,e.clienty); E.preventdefault (); //call the Draw Magnifier method according to the Ismousedown state if(Ismousedown = =true) {drawfilterimg (true, POS); } } //The mouse lifts up the stateCav01.onmouseup =function(e) {//gets the coordinates of the mouse relative to the canvas varpos =Getmousepos (E.clientx,e.clienty); E.preventdefault (); //calling the Draw Magnifier methodDrawfilterimg (false); //set the Ismousedown state to FalseIsmousedown =false; } } //Draw Magnifier Method flag: Used to determine whether to start drawing, Pos: The coordinates of the mouse relative to the canvas canvas functiondrawfilterimg (flag,pos) {//each call empties the canvas canvas to avoid duplicate imagesCxt01.clearrect (0, 0, Cav01.width, cav01.height); Cxt01.drawimage (oimg,0, 0, Cav01.width, cav01.height); //defining the magnifying glass radius varr = 100; if(Flag = =true){ //calling the Draw enlargement area methodDrawfilterimgcon (POS,R); } } //To draw a magnified area method functionDrawfilterimgcon (pos,r) {//start clipping coordinates on a large image varSX = Pos.x*scale-R; varSY = Pos.y*scale-R; //the coordinates drawn on the canvas varDX = pos.x-R; varDY = pos.y-R; Cxt01.save (); Cxt01.strokestyle= ' Rgba (0,0,0,0.3) '; Cxt01.linewidth= 2; Cxt01.beginpath (); Cxt01.arc (Pos.x, Pos.y, R,0, Math.pi*2); Cxt01.stroke (); Cxt01.clip (); Cxt01.drawimage (cav02, SX, SY, R* *, r*2, dx, dy, r*2, r*2); Cxt01.restore (); } //defines how to get the mouse position on the canvas //x: The x-coordinate of the mouse distance window, y: the y-coordinate of the mouse distance window functiongetmousepos (x, y) {varOcanpos =Cav01.getboundingclientrect (); return{x:x-Ocanpos.left, Y:y-ocanpos.top} }}</script>
HTML code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Canvas Picture Magnifier</title> <style>Body{Background-color:#333;Padding-top:60px; }#cav01{Display:Block;margin:0 Auto; }#cav02{Display:None;} </style></Head><Body> <!--Main Canvas - <CanvasID= "Cav01"style= "border:1px solid #666;"></Canvas> <!--off-screen canvas for placing enlarged images, default state is hidden - <CanvasID= "Cav02"></Canvas></Body></HTML>
Source: mu Lesson net canvas Play-turn image processing
Canvas knowledge 02: Image Magnifier Effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
