图片无损放大工具

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>图片查看器(放大器)</title>

</head>

<body style="background: black;">

<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">您的浏览器尚不支持canvas</canvas>

<canvas id="offCanvas" style="display: none"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var context = canvas.getContext('2d');

    var offCanvas = document.getElementById('offCanvas');

    var offContext = offCanvas.getContext('2d');

    var image = new Image();

    var scale;

    var isMouseDown = false;


 

    window.onload = function () {

        canvas.width = 1152;

        canvas.height = 768;

        image.src = 'https://picsum.photos/300/200.jpg?random=1';

        image.onload = function () {

            offCanvas.width = image.width;

            offCanvas.height = image.height;

            scale = offCanvas.width/canvas.width;

            context.drawImage(image, 0, 0, canvas.width, canvas.height);

            offContext.drawImage(image,0,0)

        }

    }

    function windowToCanvas(x, y) {

        var bbox = canvas.getBoundingClientRect();

        return {

            x: x - bbox.left,

            y: y - bbox.top

        }

    }

    canvas.onmousedown = function (e) {

        e.preventDefault()

        isMouseDown = true;

        point = windowToCanvas(e.clientX, e.clientY);

        drawCanvasWithMagnifier(true, point)

    }

    canvas.onmouseup = function (e) {

        e.preventDefault()

        isMouseDown = false;

        drawCanvasWithMagnifier(false);

    }

    canvas.onmouseout = function (e) {

        e.preventDefault()

        isMouseDown = false

        drawCanvasWithMagnifier( false )

    }

    canvas.onmousemove = function (e) {

        e.preventDefault()

        if(isMouseDown){

            point = windowToCanvas(e.clientX,e.clientY);

            drawCanvasWithMagnifier(true,point);

        }

    }

    function drawCanvasWithMagnifier(isShowMagnifier, point) {

        context.clearRect(0, 0, canvas.width, canvas.height);

        context.drawImage(image, 0, 0, canvas.width, canvas.height);

        if (isShowMagnifier) {

            drawMagnifier(point);

        }

    }

    function drawMagnifier(point) {

        var mr = 200;

        //将缩小版图片上点击的位置映射到大图上

        var imageLG_cx = point.x*scale;

        var imageLG_cy = point.y*scale;

        //将大图上对应的点移动到圆心

        var sx = imageLG_cx - mr;

        var sy = imageLG_cy - mr;

        var dx = point.x - mr;

        var dy = point.y - mr;

        context.save();

        context.lineWidth=10;

        context.strokeStyle='#069';

        context.beginPath();

        context.arc(point.x, point.y, mr,0, 2*Math.PI, false);

        context.stroke();

        context.clip();

        context.drawImage(offCanvas, sx, sy, 2*mr, 2*mr,dx,dy,2*mr,2*mr);

        context.closePath();

        context.restore();

    }

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">

<p>适用浏览器:Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>

</div>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值