使用 JavaScript 进行图像缩放？
有没有人有一些好的代码来使用 javascript 放大图像？
我知道我可以调整它的大小等，但我很懒，正在寻找一些聪明的东西来缩放到不同的级别，缩放时四处移动等
Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
检查这个：
Check this:
图像有多大？
如果它们是巨大的图像，您可以使用此 http:// www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
这实际上取决于您追求什么质量。 如果您需要具有详细缩放级别和适当插值的高质量图像，您将需要编写后端服务来提供图像的缩放部分。 如果您不关心质量或速度，您可以下载整个图像并将其显示在绝对定位的 div 内，偏移您要查看的区域并根据缩放级别确定大小。
我想说你可能会选择第一个选择。 已经有一些工具为此，我个人没有使用过任何工具; 我确信其他人会发布其他您可以尝试的链接； 我已经编写了自己的服务和客户端。 我无法详细介绍其专有的具体细节，但我可以向您概述我所做的事情。
我有一个 asp.net 通用处理程序，它采用一个查询字符串来表示哪个图像（通过 id）以及要放大的坐标和目标图像大小。 我让服务加载图像并裁剪并调整其大小（它比这更复杂，因为我在文件最初上传时进行了许多优化和准备，例如文件的多个横截面以便在缩放时更快地提供服务，但我所描述的这是基础知识）。
该服务仅返回 image/jpeg 类型并发送图像。
在客户端，我编写了一个选取框控件，允许用户选取要放大的图像上的区域。 他们将该区域选框并单击缩放。 然后，根据原始图像大小和可视图像大小计算所选坐标的图像偏移量。 我将这些坐标发送到前面提到的处理程序。我将带有服务查询字符串的 url 加载到 Image 对象中，并处理 onload。 如果一切顺利，我会将其交换到查看的图像并更新所有客户端变量，以确定我放大到图像上的位置，然后可以再次缩放或缩小或从那里进一步平移。
现在我理解你的懒惰要求，但我需要说，写这篇文章实际上很容易让基础知识继续下去。 您会发现最难的部分是选择框。 但即便如此，也可以像跟踪两次点击一样简单。 缩放选择标记的左上角和右下角。 或者根本没有选择框，并且仅以预定的间隔进行放大和缩小。 我的项目需要一个缩放框，因为它是一个相当复杂的图像分析解决方案。
我希望这至少对您有所帮助，并引导您找到有用的东西。
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.