How would calculate an area coordinate on a flexible image - javascript

Imagine a responsive app with image face tagging. You can drag an area, tag the person and it records the coordinates using (http://odyniec.net/projects/imgareaselect/)
But imagine the image get resized with css to adapt for the window size, the absolute coords don't fit anymore of course.
What would be a better strategy to achieve this?

Related

How can i draw a part of an image on top of a html page depending on my mouse movement? (with or without canvas)

I want to draw an image on top of my html page depending on my mouse movement.
How can i do that? Is it a better approach to put the image below the rest of the html and scratch the html somehow away, or tu put the image above it and add it partially on top.
I found solutions on the internet with 2 images on top of each other where the top one is erased with canvas, but since i have multiple elements i want to overwrite, i have no idea how to solve it.
Assuming I've interpreted the question correctly, that the requirement is to allow the user to 'scratch away' at the page gradually revealing an image, you could do it either way.
There are libraries that will create a canvas of a page (or part thereof) such as htm2canvas. Using one of these you turn your page into an image, place it over the given image and remove (make transparent) pixels on the top canvas as the mouse moves. The drawback with this approach is that it's possible the conversion of the HTML to canvas isn't totally complete. There may be some aspects for example of CSS that aren't correctly rendered.
To be sure therefore it's probably better to do it the other way round. Lay a blank canvas over the page and copy the image to another canvas with the same dimensions but which is outside the viewport. As the mouse moves over the blank canvas copy the relevant pixels from the offscreen canvas to it.
If you could confirm that I've understood your question correctly I could go into more detail.

HTML: Image map areas' responsiveness

I need to use image map in my website, to add different links to each part of image.
But I have problems with its responsiveness. I couldn't change map area's size while resizing window.
Can anyone help me with this? The method is not important, I can use either Js or Css.
Update:
I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.
Do anyone have this problem too?
Imagemap is a very Old way to create websites I preffer using photoshop image sílice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more
If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.
You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)
Here are some examples of using RaphaelJS: LINK1 LINK2
And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)

Pan Larger image when Thumbnail is panned

Sorry for the awful title, I wasn't sure of the correct terminology to use.
I have put a world map on a webpage with a canvas window on the image. This world map is far too large to view at once so the user can pan the image within the window. I would like to also place a "thumbnail" version of the image on the page with a rectangle cursor over
layed on top of the thumbnail. When the user moves the cursor over the thumbnail, the large map will move (self-pan) to match the area under the rectangle cursor on the thumbnail![enter image description here][1]
There is an example in the image provided. You will see a small portion of a worldmap. To the right is a thumbnail of the image with a rectangle cursor. When that cursor is moved, the world map will pan.
I am using HTML5 and javascript. No other languages. If someone could point me to an example or set me on the right path, I would be very grateful.
Thank yoU!

How do website heatmaps get accurate data?

There are services like crazyegg.com that show you where visitors are resting their mouse cursors on your web page. My question is, given that people have different screen widths how can they be sure that my x coordinate is the same position on the page as another persons x coordinate? Meaning, two people may have the same mouse x coordinates, but since there screens are different widths, their mouse will be on a different part of the web page.
How can you create a web-page heat map service that takes this into consideration, and can be scaled and used across multiple different websites with different content sizes?
You can collect x & y data by element (like a main content div) rather than the entire viewport. In this fashion you can discard dead-space which is subject to a user's resolution.
You can add a clickhandler to the body or a wrapper div (better when your content is centered on the screen using margin: auto) that hold all the content of the page. The passed in MouseEvent hold the screenX/Y and the clientX/Y coordinates, where the former are the coordinates starting in the left top corner of the screen and the other are coordinates based on the top/left corner of the body or wrapper div. Using the clientX/Y coordinates made it easy to create a heat map cause you the same start point relative to your content over different screen sizes.
Instead of tracking the absolute x and y coordinate of the webpage, you can track the click coordination relative to the elements clicked. So, it would cater to different screen sizes and resolutions as the element position shifted.
There is also another aspect that you need to pay attention to which is each of the users' viewport width and the length of the full page (entire scrollable height) that you can adjust according to relative positioning.
At Howuku we did a lot of optimization on the mouse click and movement to ensure the precise and accurate datapoint that is dynamically generated for our website heatmap tool.
I hope this helps!

Maintaining image size in droppable as a background

How can I maintain the size of image as a background of droppable? I don't know the size of image so when I set the droppable background to an image it either crops to fit the designated area or multiplies to fit it? How can I make it to fit the area by streching while maintaining the aspect ratio?
Since I already define the size of droppable in my style, I don't want to change the size of my droppable to fit the image. Rather, I want the image to be loaded to be completely contained with proper aspect ratio to the droppable meaning without being cropped or multiplied. Can this be done through jquery or javascript?
Two possible solutions:
The first is PHP GD's imagesx() and imagesy(). That is using PHP, sure, but if you can use PHP, it can be good as then you'll perhaps learns some PHP GD too. :)
Otherwise, you could use the solution to this question.

Categories