Javascript 如何放大图像并将其居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2028557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to zoom in an image and center it?
提问by sat
Any Idea how to zoom in a image on particular point using javascript, css? I am using webkitbased browser.
任何想法如何在特定点图像中使用放大javascript，css？我正在使用webkit基于浏览器的浏览器。
I can zoom by specifying zoom property , like `elem.style.zoom="150%", Main problem is I cannot center the image where I want to zoom. I can get the point where I want to zoom using mouseclick.
我可以通过指定缩放属性进行缩放，例如`elem.style.zoom="150%"，主要问题是我无法将图像居中缩放。我可以使用mouseclick获得我想要缩放的点。
回答by Andy E
As I said in my comment above, I would avoid the zoom css property and stick to just javascript. I managed to throw together the following code which works pretty well for the first click, really all it needs is a little more dynamically (even a word?).
正如我在上面的评论中所说，我会避免使用 zoom css 属性并只使用 javascript。我设法将以下代码放在一起，这些代码在第一次点击时效果很好，实际上它所需要的只是更动态一点（甚至是一个词？）。
<html>
<head>
<script type="text/javascript">
function resizeImg (img)
{
var resize = 150; // resize amount in percentage
var origH = 200; // original image height
var origW = 200; // original image width
var mouseX = event.x;
var mouseY = event.y;
var newH = origH * (resize / 100) + "px";
var newW = origW * (resize / 100) + "px";
// Set the new width and height
img.style.height = newH;
img.style.width = newW;
var c = img.parentNode;
// Work out the new center
c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
c.scrollTop = (mouseY * (resize / 100)) - (newH / 2) / 2;
}
</script>
<style type="text/css">
#Container {
position:relative;
width:200px;
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="Container">
<img alt="Click to zoom" onclick="resizeImg(this)"
src="https://picsum.photos/200" />
</div>
</body>
</html>It works in Google Chrome and IE, not sure about others. Like I said hopefully it will point you in the right direction.
它适用于 Google Chrome 和 IE，其他人不确定。就像我说的，希望它会为您指明正确的方向。
回答by Gabriele Petrioli
What has to be done.
必须做什么。
- Get the location of the click inside the image. This might seem easy but it is not because the pageX and pageY of the event hold the coordinates in regard to the document. To calculate where inside the image someone clicked you need to know the position of the image in the document. But to do this you need to factor in all the parents of it, as well as if they are relative/absolute/static positioned .. it gets messy..
- calculate the new center (the click position scaled - the top/left position of the container)
- scale the image and scroll the container to the new center
- 获取图像内点击的位置。这可能看起来很简单，但这并不是因为事件的 pageX 和 pageY 保存了关于文档的坐标。要计算某人在图像中单击的位置，您需要知道图像在文档中的位置。但是要做到这一点，您需要考虑它的所有父项，以及它们是否是相对/绝对/静态定位的......它会变得混乱..
- 计算新中心（缩放的点击位置 - 容器的顶部/左侧位置）
- 缩放图像并将容器滚动到新中心
if you do not mind using jQuery for it then use the following (tested)
如果您不介意使用 jQuery，请使用以下内容（已测试）
<script type="text/javascript">
$(document).ready(
function(){
$('#Container img').click(
function( event ){
var scale = 150/100;
var pos = $(this).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(this).parent().get(0);
$(this).css({
width: this.width*scale,
height: this.height*scale
});
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);
}
);
</script>
and the html needed
和需要的html
<div id="Container">
<img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" />
</div>
回答by Silly Dude
In following code, the image is amplified at the mouse click point - the image is amplified, but the point where you clicked remains under your mouse cursor, and the size of the frame remains the same. Right-click to go back to original display ratio.
在下面的代码中，图像在鼠标点击点被放大 - 图像被放大，但您点击的点仍然在鼠标光标下，并且框架的大小保持不变。右键单击可返回原始显示比例。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
div {
width: 400px;
height: 600px;
overflow: hidden;
}
img {
position: relative
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var imageOffset_x = 0;
var imageOffset_y = 0;
function onZoom()
{
var mouseInFrame_x = event.x;
var mouseinFrame_y = event.y;
var mouseInImage_x = imageOffset_x + mouseInFrame_x;
var mouseInImage_y = imageOffset_y + mouseinFrame_y;
imageOffset_x += mouseInImage_x * 0.16;
imageOffset_y += mouseInImage_y * 0.16;
var image = $('#container img');
var imageWidth = image.width();
var imageHeight = image.height();
image.css({
height: imageHeight * 1.2,
width: imageWidth * 1.2,
left: -imageOffset_x,
top: -imageOffset_y
});
}
function onRightClick() {
imageOffset_x = 0;
imageOffset_y = 0;
$('#container img').css({
height: 600,
width: 400,
left: 0,
top: 0
});
return false;
}
</script>
</head>
<body>
<a id="zoom" href="#" onclick="onZoom();">Zoom</a>
<div id="container">
<img src="~/Images/Sampple.jpg" width="400" height="600" onclick="onZoom();" oncontextmenu="onRightClick(); return false;"/>
</div>
</body>
</html>
