javascript html5中的图像查看器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12506840/
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
Image viewer in html5
提问by KiranPalode
I have to develop an image viewer application. The designed application should have the following features
我必须开发一个图像查看器应用程序。设计的应用程序应具有以下特点
- Zoom in functionality
- Zoom out functionality
- Magnifying functionality
- Pan functionality
- Image overview functionality
- 放大功能
- 缩小功能
- 放大功能
- 平移功能
- 图像概览功能
I have to develop the application in Asp.net application. I have the following questions
我必须在 Asp.net 应用程序中开发应用程序。我有以下问题
- What will be the better method to develop such application , I mean Whether it is implemented using Asp.net controls or standard HTML controls
- Have any scope of HTML5 in developing such application?
- Can i get any customizable open source project written in javascript or jQuery?
- 开发这种应用程序的更好方法是什么，我的意思是它是使用Asp.net控件还是标准HTML控件实现的
- 在开发此类应用程序中是否有任何 HTML5 范围？
- 我可以获得任何用 javascript 或 jQuery 编写的可定制的开源项目吗？
采纳答案by Rob Angelier
My answers to your questions:
我对你的问题的回答：
- I would use HTML, since you don't need anything from the server.
- There is, you can search google for info.
- Look at the info below.
- 我会使用 HTML，因为您不需要来自服务器的任何东西。
- 有，你可以在谷歌搜索信息。
- 看看下面的信息。
I would try the following steps:
我会尝试以下步骤：
- Look for examples of the required features.
- Strip these examples down and build them up again according to your requirements.
- Create a holder for the image. You can load the image from the server with jQuery and AJAX
- Implement controls for zooming, panning. Use the implementation you created in step 2
- 查找所需功能的示例。
- 剥离这些示例，然后根据您的要求重新构建它们。
- 为图像创建一个支架。您可以使用 jQuery 和 AJAX 从服务器加载图像
- 实现缩放、平移控件。使用您在第 2 步中创建的实现
There is alot of information to be found on the internet. Some examples are:
有很多信息可以在互联网上找到。一些例子是：
Zooming
缩放
http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html
http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html
Panning
平移
http://manos.malihu.gr/jquery-image-panning
http://manos.malihu.gr/jquery-image-panning
Overview
概述
http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/
http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/
Tutorial for pan and zooming with HTML5 canvas
使用 HTML5 画布平移和缩放的教程
回答by theintersect
For me,
给我，
- I would use HTML,
- Use HTML5 and CSS3 if you can,
- Yes, there are plenty. Just type what you need. It seems what you are building is a image slider/gallery. Plenty of those on the web. Just look for it.
- 我会使用 HTML，
- 如果可以，请使用 HTML5 和 CSS3，
- 是的，有很多。只需输入您需要的内容。看来您正在构建的是一个图像滑块/画廊。网上有很多这样的。只是寻找它。
If you have to build it from scratch, what you could do is research, these css properties. scale, zoom, and transitions.
如果您必须从头开始构建它，您可以做的是研究这些 css 属性。缩放、缩放和过渡。
There you go, hope I pointed you in the right direction.
好了，希望我为您指明了正确的方向。
