Home/ Questions/Q 7865479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T00:05:59+00:00

I’m experienced C++ developer doing image processing, but I have a task to create

  • 0

I’m experienced C++ developer doing image processing, but I have a task to create some web page to compare different results of several algorithms applied to one image.

I’m totally newbie in anything related to web programming so my question is what tool should I use to create such a web-page? It should show several images: source one and its variations produced by some algorithms. The challenge is I want to be able to examine all those images at once at different levels of magnifications at different locations.

I.e. initial page may look like this with source image on top:

enter image description here

Then I hover mouse cursor on source image, zoom in by turning mousewheel and drag it a little to the area of interest, so now I can see something like this:

enter image description here

Well, that’s all. I don’t need any pretty animations or fancy marquee previews. This is just a pragmatic task. I think, there are dozens of ways to do this, but what is the simplest way of doing this for a newbie?

Thanks. Maybe this question should have been posted at some different site more related to web-programming? Advice on where to post it would be welcom.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you need to use JS with CSS tricks (JS to control CSS).

    For example zoom image with widht\height parameters (CSS\HTML), then set the viewpoint using negative margins(CSS) and then crop image using overflow:hidden on div wrapped around image.

    I can recommend you to use jQuery.

    Here is an example http://cs.scaytrase.ru/image_clip.html

    You can control images with .clipin class values (clip, top and left) to set viewport and images` width and height parameters to set zooming

    Left thumbnailes are 4x zoomed right picture (orig 1280×1024, zoomed to 500px to place)

    Size of pictures controlled via common .clipout class

    So you can display one big image, move mouse over it to display patch you need in several other pictures ot the same size.

    • 0