javascript: Highlighting image areas / sections

Question

I want to create a simple jsp / servlet code which should have the following:

1) Display an image having different sections. For example: a country map.

2) Allow the user to mark sections on this image using mouse drag. As the user keeps dragging the mouse, the area gets overlay-ed with some different color.

3) As the user moves the mouse, the x and y coordinates on the image should also get calculated. [This feature is however optional.]

The purpose of this application is to mark different 'zones' in an image, which will get saved in the database along with their x-y coordinates.

Can someone please suggest how to achieve this ? Is there any library / API available which could be helpful ?

Regards,

Can you please suggest some way to do this using javascript/html ? — Anand03, Jan 21 '15 at 20:23

score 0 · Answer 1 · answered Jan 21 '15 at 22:35

Here is a snippet to get you going. Replace the text setting of the div#server with code to send coordinates to your server. I'll leave the background image for canvas and other important stuff up to you.

var c = $("#map");
var ctx = c[0].getContext("2d");
var down = [0, 0];
var bound = c[0].getBoundingClientRect();

c.mousedown(function(e) {
  down = [e.clientX - bound.left, e.clientY - bound.top];
});

c.mouseup(function(e) {
  var rect = [
    down[0],
    down[1], ((e.clientX - bound.left) - down[0]), ((e.clientY - bound.top) - down[1])
  ];
  ctx.fillStyle = "#bbbbbb";
  ctx.fillRect(rect[0], rect[1], rect[2], rect[3]);
  $("#server").text("Send: " + rect);
});

body {
  background-color: lightblue;
}
#map {
  background-color: white;
  cursor: crosshair;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="map" width="256" height="256"></canvas>
<div id="server"></div>

javascript: Highlighting image areas / sections

1 Answers1