画布绘图图像在css高度和宽度的图像上不能正常工作。
我试图用画布编写一个图像放大镜，它工作得很好，但问题是当我在画布上滑动图像时，绘制在画布上的图像不能根据图像上的鼠标位置正确定位。
您可以看到问题这里
<!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>回答 1
Stack Overflow用户
发布于 2014-05-19 12:52:17
主要的问题是，你是在缩放原始图像，强迫它变成640×400 img元素。实际图像要大得多。宽度和高度只是表示设置，所以当您绘制图像ctx.drawImage(img,a,b,150,150,0,0,300,150);时，它正在绘制原始的非大小图像。这意味着您的鼠标坐标与原始图像上的位置不匹配。
我可以看到两种选择：
1.通过绘制到画布来调整原始的大小
参见update 这里。我以前还没有使用过小提琴，所以这里有一个，以防我没有正确地保存它。基本上，它将图像调整为画布(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坐标(质量更好)
参见update 这里 (也可以篡改这里 )。如你所见，质量要好得多。
在这里，我们加载原始图像：
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 )时，我们实际上根本没有对原始图像进行任何调整，而是将其显示为更大的本地大小。对于较小的图像，您可能需要根据一些模糊因素调整大小。
https://stackoverflow.com/questions/23733787
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号