How to dynamically alter JPEG contrast and zoom level in the browser - javascript

My educational website displays single medical images (such as chest X-rays) as a JPEG in a div. I'd like to add the ability for the user to dynamically change the contrast, zoom and pan within the div containing the JPEG. I've been searching for days for a Javascript library that could do this but I'm come up empty. Does anybody have any suggestions that might help?

http://www.netzgesta.de/shiftzoom/ perhaps? It allows you to add zoom and pan functionality.
also http://camanjs.com/ lets you change contrast.

Related

Single image different background

I don't really know what im searching for even after googling all sorts and wondered if someone could put me in the right direction.
Lets base this example on a car frame.
I would like to have one image of a car frame which allows to have multiple colours (Hex), so when a user selects black, the main car colour is black but the shape/frame of the car remains with the same image, selecting red would change the colour but would keep the same frame image.
The reason why i would like to have one image is, because there could be 50-60 cars all with around 20-30 different colours. So uploading that many images would consume a lot of disk space over time.
Any components/frameworks i could use with an ASP net project?
Either client side Html and Javascript:
You could do this efficiently by creating a partially transparent image I guess. Then change the background color of the element below the image using script. It depends on the type of picture and quality of the output if this is an option for you.
A better approach would be to change the color of pixels directly. Look for Html5 canvas pixel manipulation or use this link: Pixel manipulation with canvas. Scroll down to the Grayscale sample to start with.
Or server side C#:
Use image filters/direct pixel manipulation. Look for "Pixel Manipulation in C#" to find the right libs and API for your project and framework e.g. WriteableBitmapEx. More choices here: .NET Core Image Processing.

How do I stop a zoom script from expanding the outer sides of a table

I just built a website and borrowed a piece of free javascript to zoom in on product images.
The only problem is that the image blows out the sides of my tables and it looks clunky.
Can someone please have a look at this page for example:
http://workplacesafetywarehouse.com/ppe-equipment-list-products/l9265lyymc-12-led-viper-warning-light.htm
Hover over the image and tell me how I can make it zoom in without pushing my table apart? Note that I don't mind if it pushes the internal 's apart and wraps the text, just the outer perimeter.
I also wouldn't be against replacing it with a better zoom in javascript if that's a better way to go.
Many thanks guys.
Cathy
You should change in this code onmouseover="resizeImg(this, 300)" to onmouseover="resizeImg(this, 200)". in future you change this value to controle your zoom size. 300 means 3x zoom of your original size image so you mange your zoom size from this.

jQuery and Rails image tagging / rectangle selection

I have a simple problem in my mind but can't figure out where to start and JS isn't my strongest front. The JavaScript part is what gives me troubles.
I have an uploaded image which I want to drag my mouse upon to make a rectangle and get the rectangle coordinates. Those coordinates should go into my Rails app db so that this rectangle is latter displayed to the user and the image part that is selected will be zoomed to the user.
I've gone through several jQuery plugins that do tagging on images but first of all they are too complex for my needs and can't be customizable to this specific need of mine.
In order to get a real live example please see this http://www.stylebistro.com/lookbook/Tops/PJfJzgo2fN9
It is essentially what I want to achieve but the administration part is giving me troubles.
Regards,
Yavor
jCrop has an API that returns image coordinates. It can zoom the image as well, so it should be a good fit.

convert image into html sections

I want to convert image into HTML sections ( see image below marked as red , blue , orange , green and yellow). That means when i click on these parts they will appear as a separate section in a separate window just like online news paper.
Well one can do this by using photoshop slicing tool may be m not sure.. but don't want to use photoshop rather i want to implement such functionality where i can select the section over image and then later on it will get convert into html page or part.
so can anyone give me some idea , example or a road map to do that
This is not the simplest task, luckily, there are plenty of tools that do what you want (generate the map that creates the hotspots for your image)
http://www.maschek.hu/imagemap/imgmap
http://www.image-maps.com/ This one lets you use an existing map and modify it.
and many others http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=online+image+map+creator
If you want to be able to click and link just to that part of the image you have two options:
Write some server side code that does the slicing of images, based on the map coordinates. There are many libraries available to do this, in PHP, there's GD http://php.net/manual/en/book.image.php and http://www.imagemagick.org/script/index.php which can run on many platforms.
When you click on an image, pass the map coordinates to the new page, and position the image using a window technique, much like css sprites. http://websitetips.com/articles/css/sprites/

How can I make certain areas of children’s book illustrations clickable?

I have a design from a client who is a children’s book illustrator. The site will be done in WordPress so they can edit certain pages etc. On some pages there will be illustrations that will also have clickable areas.
I suggest using Flash to show the illustrations, but they don’t like Flash at all.
I was thinking the other option was to use CSS background images with <div>s to position as clickable, but this is cumbersome.
Slicing the images into bits and pieces is also cumbersome due the the organic nature of the shapes and illustrations.
Are there any other options?
HTML image maps?
You could try using an image map. They will allow you to define an area of an image and assign an onclick event or href.
http://www.w3schools.com/TAGS/tag_map.asp

Categories