使用javascript图像缩放？ [英] Image Zoom using 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

推荐答案

这实际上取决于你的质量。如果您需要具有详细缩放级别和正确插值的雇佣高质量图像，则需要编写后端服务以提供图像的缩放部分。如果您不关心质量或速度，您可以下载整个图像并使其适合显示在绝对定位的div内，偏移到您想要查看的区域，并根据缩放级别确定大小。

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.

我有一个asp.net泛型处理程序，它接受一个查询字符串表示哪个图像（通过id）和要放大的坐标以及目标图像大小。我有服务加载图像和裁剪并调整它（它比我更复杂，因为我有最初上传文件时的许多优化和preparsing，如文件的多个横截面，以便在缩放时更快地服务，但我所描述的这是基础知识。

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).

该服务只返回类型image / jpeg并发送图像。

That service simply returns type image/jpeg and sends the image.

On客户端我编写了一个选框控件，允许用户在他们想要放大的图像上选取一个区域。选中该区域并单击缩放。然后，这基于原始图像大小和可视图像大小计算所选坐标的图像的偏移。我将hese coords发送到前面提到的处理程序。我将带有srvice的查询字符串的url加载到Image对象中，并处理onload。如果一切顺利，那么我将其交换到查看的图像并更新我所有的客户端变量，以确定我放大的图像上的位置，然后可以再次缩放或缩小或从那里进一步平移。

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.

这篇关于使用javascript图像缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！