canvas实现放大镜查看图片

忘是亡心i 2022-06-14 03:19 310阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body style="background: black;">
    <canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa ">
        你的浏览器不支持canvas
    </canvas>
    <canvas id="offCanvas" style="display: none"></canvas>
    <script>
        var myCanvas = document.getElementById("myCanvas");
        var context = myCanvas.getContext("2d");
    
        var offCanvas = document.getElementById("offCanvas");
        var offContext = offCanvas.getContext("2d");
    
        var isMouseDown = false;
        var scale;
    
        var image = new Image();
    
        window.onload = function () {
    
            myCanvas.width = 300;
            myCanvas.height = 200;
    
            image.src = "1.jpg";
    
            image.onload = function () {
    
                offCanvas.width = image.width;
                offCanvas.height = image.height;
                scale = offCanvas.width / myCanvas.width ;
    
                context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
                offContext.drawImage(image,0,0);
    
            }
    
        };
        function windowToCanvas(x,y) {
            var bbox = myCanvas.getBoundingClientRect();
            return { x : x - bbox.left ,  y : y - bbox.top};
        }
        myCanvas.onmousedown = function (e) {
            e.preventDefault();
            var point = windowToCanvas(e.clientX , e.clientY);
            console.log(point);
            isMouseDown = true;
            drawCanvasWithMagnifier( true , point );
        };
        myCanvas.onmousemove = function (e) {
            e.preventDefault();
            if (isMouseDown ){
                var point = windowToCanvas(e.clientX , e.clientY);
                drawCanvasWithMagnifier( true , point );
            }
        };
        myCanvas.onmouseup = function (e) {
            e.preventDefault();
            isMouseDown = false;
            drawCanvasWithMagnifier( false );
        };
        myCanvas.onmouseout = function (e) {
            e.preventDefault();
            isMouseDown = false;
            drawCanvasWithMagnifier( false );
        };
        function drawCanvasWithMagnifier( isShowMagnifier , point) {
            context.clearRect(0,0,myCanvas.width,myCanvas.height);
            context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
            if(isShowMagnifier == true ){
                drawMagnifier( point );
            }
        }
        function drawMagnifier( point ) {
            var imageLG_cx = point.x * scale ;
            var imageLG_cy = point.y * scale ;
    
            var mr = 20 ;
    
            var sx = imageLG_cx - mr ;
            var sy = imageLG_cy - mr ;
    
            var dx = point.x - mr ;
            var dy = point.y - mr ;
    
            context.save();
    
            context.lineWidth = 5.0;
            context.strokeStyle = "#069";
    
    
            context.beginPath();
            context.arc(point.x,point.y,mr,0,Math.PI*2);
            context.stroke();
    
            context.clip();
    
            context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
            context.restore();
        }
    </script>
    </body>
    </html>