图片无损放大工具-优快云博客

<!DOCTYPE html>

<head>

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

</head>

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

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>

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

</div>

</body>

</html>