캔버스로 이미지 돋보기를 작성하려고하는데 잘 작동하지만 문제는 이미지 위에 마우스를 올려 놓으면 캔버스에 그려진 이미지가 이미지의 마우스 위치를 기반으로 올바르게 배치되지 않는다는 것입니다.
여기 에서 문제를 볼 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Magnifier</title>
<style type="text/css">
canvas
{
border:1px solid #000;
width:150px;
height:150px;
border-radius:80px;
position:absolute;
}
</style>
</head>
<body>
<img src="natural.jpg" height="400" id="image" width="600" onMouseMove="move(event);">
<canvas id="magnifier"></canvas>
<input type="button" name="magnify" id="magnify" value="magnify" onClick="magnify()" />
</body>
</html>
<script type="text/javascript">
var flag = 0;
var lens = document.getElementById('magnifier');
var img = document.getElementById('image');
var ctx=lens.getContext("2d");
function magnify()
{
flag = 1;
}
function move(e)
{
if(flag == 1)
{
var co_ord = getImageCoords(e,img);
var x = co_ord['x']+img.offsetLeft;
var y = co_ord['y']+img.offsetTop;
draw(x,y);
/*lens.style.top = y+"px";
lens.style.left = x+"px";*/
}
}
function getImageCoords(event,img) {
var cords = new Array;
cords['x'] = event.offsetX?(event.offsetX):event.pageX-img.offsetLeft;
cords['y'] = event.offsetY?(event.offsetY):event.pageY-img.offsetTop;
return cords;
}
function draw(a,b)
{
ctx.clearRect(0,0,lens.width,lens.height);
ctx.drawImage(img,a,b,150,150,0,0,300,150);
}
</script>
주요 문제는 원본 이미지를 640 x 400 img 요소로 강제하여 크기를 조정한다는 것입니다. 실제 이미지는 상당히 큽니다. 너비와 높이는 프레젠테이션 ctx.drawImage(img,a,b,150,150,0,0,300,150);설정일 뿐이므로 이미지를 그릴 때 원래 크기가 조정되지 않은 이미지를 그리는 것입니다. 이는 마우스 좌표가 원본 이미지의 위치와 일치하지 않음을 의미합니다.
두 가지 옵션을 볼 수 있습니다.
1. 캔버스에 그려서 원본 크기 조정
여기에서 업데이트를 참조 하십시오 . 전에 cssdeck을 사용 하지 않았으므로 제대로 저장하지 않은 경우를 대비 하여 여기에 바이올린 이 있습니다. 기본적으로 이미지의 크기를 캔버스 (resizeCanvas)로 조정 한 다음이 캔버스를 드로잉에 사용합니다.
관련 HTML :
<canvas id='resizeCanvas' height='400' width='600' onMouseMove="move(event);"></canvas>
관련 JavaScript :
var ctxR=resizeCanvas.getContext("2d");
ctxR.drawImage(theImg,0,0,600,400);
내가 만든 몇 가지 다른 조정이 있습니다. 먼저 돋보기 캔버스에서 너비 및 높이 속성을 직접 지정해야합니다. 그렇지 않으면 이것이 CSS와 다른 경우 스케일링이 발생합니다. 그런 다음 다음과 같이 크기를 두 배로 늘리기 위해 배율을 조정할 수 있습니다.
ctx.drawImage(img,a,b,150,150,0,0,300,300);
이 접근 방식의 유일한 단점은 업로드하는 고해상도 이미지가 있고 확대 할 때 일부 품질이 손실된다는 것입니다. 따라서 더 나은 접근 방식은 dom에 추가하지 않고 원본 이미지를로드 한 다음 원본 이미지에 맞게 x, y 좌표를 변환하는 것입니다. 두 번째 접근 방식은 다음과 같습니다.
2. x, y 좌표 크기 조정 (더 나은 품질)
여기 에서 업데이트를 참조 하십시오 ( 여기 에서도 바이올린 ). 보시다시피 품질이 훨씬 좋습니다.
여기에서 원본 이미지를로드합니다.
var origImage = document.createElement('img');
var origImage.src = '<image source>'
그런 다음 적절하게 확장하십시오.
scaleX = origImage.width/img.width;
scaleY = origImage.height/img.height;
ctx.clearRect(0,0,lens.width,lens.height);
ctx.drawImage(img,a*scaleX,b*scaleY,150,150,0,0,150,150);
캔버스에 그릴 때 원본 이미지의 크기를 실제로 조정하지 않고 (모든 경우 너비와 높이가 150 임) 더 큰 기본 크기로 표시하는 것입니다. 작은 이미지의 경우 일부 퍼지 요소에 따라 크기를 조정할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다