0

我是经验丰富的 C++ 开发人员进行图像处理,但我的任务是创建一些网页来比较应用于一张图像的几种算法的不同结果。

我在任何与网络编程相关的事情上都是新手,所以我的问题是我应该使用什么工具来创建这样的网页?它应该显示几幅图像:源一及其由某些算法产生的变体。挑战在于我希望能够在不同位置以不同的放大倍率同时检查所有这些图像。

即初始页面可能看起来像这样,顶部有源图像:

在此处输入图像描述

然后我将鼠标光标悬停在源图像上,通过转动鼠标滚轮放大并将其拖动到感兴趣的区域,所以现在我可以看到如下内容:

在此处输入图像描述

嗯,就是这样。我不需要任何漂亮的动画或花哨的选框预览。这只是一项务实的任务。我认为,有很多方法可以做到这一点,但对于新手来说,最简单的方法是什么?

谢谢。也许这个问题应该发布在与网络编程更相关的其他网站上?欢迎提供有关在何处发布的建议。

4

1 回答 1

1

我认为您需要使用带有 CSS 技巧的 JS(JS 来控制 CSS)。

例如,使用 widht\height 参数 (CSS\HTML) 缩放图像,然后使用负边距 (CSS) 设置视点,然后使用溢出:隐藏在环绕图像的 div 上裁剪图像。

我可以推荐你使用jQuery

  • 您可以使用它来操作图像 (http://api.jquery.com/animate/)

  • 您可以使用它来跟踪鼠标 (http://docs.jquery.com/Tutorials:Mouse_Position) 和滚动 (http://api.jquery.com/scroll/) 以进行交互式缩放

  • 使用 .css 方法也很容易操作 CSS (http://api.jquery.com/css/)

这是一个示例 http://cs.scaytrase.ru/image_clip.html

您可以使用.clipin类值(剪辑顶部左侧)控制图像以设置视口和图像的宽度高度参数以设置缩放

左侧缩略图是 4 倍缩放的右侧图片(原始 1280x1024,缩放到 500 像素放置)

通过通用.clipout类控制的图片大小

因此,您可以显示一张大图像,将鼠标移到它上面以在其他几张相同大小的图片中显示您需要的补丁。

于 2012-04-27T12:29:16.467 回答