Voici une solution que j'ai posée pour une autre question de même nature il y a quelque temps. Vous devez cliquer sur la 2ème image pour définir les points - coins opposés pour les rectangles, ou les points consécutifs dans le sens horaire ou anti-horaire pour les polygones, avant de cliquer sur le bouton correspondant pour ajouter un rect ou un polygone à l'image-carte.
Vous pouvez ensuite passer la souris sur la zone correspondante de la première image pour voir la zone délimitée et en surbrillance.
C'est plutôt approximatif et n'offre aucune vérification d'erreur, mais démontre néanmoins le principe. Testé avec Chrome.
J'espère que cela vous sera utile. :)
<!DOCTYPE html>
<html>
<head>
<script>
var canvas, hdc, markerImg;
var curPoints;
function byId(e){return document.getElementById(e);}
function canvasClick2(e)
{
e = e || event;
var x, y;
x = e.offsetX;
y = e.offsetY;
curPoints.push(x);
curPoints.push(y);
hdc.drawImage(markerImg, x- markerImg.width/2, y-markerImg.height/2);
n = curPoints.length;
var str = ''
for (i=0; i<n; i++)
{
if (i != 0)
str += ', ';
str += curPoints[i];
}
byId('coords').innerHTML = str;
}
function myInit()
{
curPoints = new Array();
canvas = byId('canvas1');
hdc = canvas.getContext('2d');
markerImg = new Image();
// just a 5x5 pixel image of a '+' symbol - a cross-hair.
markerImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2NkQID/QCYjiAsmoABFEMRBAThVYmgHAAhoBQWHhfyYAAAAAElFTkSuQmCC";
canvas.addEventListener('click', canvasClick2, false);
var img = byId('img1');
canvas.setAttribute('width', img.width);
canvas.setAttribute('height', img.height);
// canvas.style.backgroundImage = 'url(img/gladiators.png)';
canvas.style.backgroundImage = 'url(http://i.stack.imgur.com/Rw5pL.png)';
var x,y, w,h;
// get it's position and width+height
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
var can = byId('canvas2');
imgParent.appendChild(can);
// place the canvas in front of the image
can.style.zIndex = 1;
// position it over the image
can.style.left = x+'px';
can.style.top = y+'px';
// make same size as the image
can.setAttribute('width', w+'px');
can.setAttribute('height', h+'px');
var ctx = can.getContext('2d');
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
}
function myClear()
{
hdc.clearRect(0,0, canvas.width, canvas.height);
curPoints.length = 0;
byId('coords').innerHTML = '';
}
function myAddShapePoly()
{
var src, tgt = byId('imgMap1'), coordStr;
src = byId('coords');
coordStr = src.innerHTML;
var newArea = document.createElement('area');
newArea.setAttribute('shape', 'polygon');
newArea.setAttribute('coords', coordStr);
newArea.setAttribute('title', 'polygon');
newArea.setAttribute('onclick', 'alert("poly area clicked");');
newArea.onmouseout = myLeave;
newArea.onmouseover = function(){myHover2(this);};
tgt.appendChild(newArea);
myClear();
}
function myAddShapeRect()
{
var src, tgt = byId('imgMap1'), coordStr;
src = byId('coords');
coordStr = src.innerHTML;
var newArea = document.createElement('area');
newArea.setAttribute('shape', 'rect');
newArea.setAttribute('coords', coordStr);
newArea.setAttribute('title', 'rect');
newArea.setAttribute('onclick', 'alert("rect area clicked");');
newArea.onmouseout = myLeave;
newArea.onmouseover = function(){myHover2(this);};
tgt.appendChild(newArea);
myClear();
}
function myHover2(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
var areaType = element.getAttribute('shape');
switch (areaType)
{
case 'polygon':
case 'poly':
fillPoly(coordStr);
break;
case 'rect':
fillRect(coordStr);
}
// byId('img1').style.cursor = 'pointer';
}
function myLeave()
{
var canvas = byId('canvas2');
var hdc = canvas.getContext('2d');
hdc.clearRect(0, 0, canvas.width, canvas.height);
// byId('img1').style.cursor = '';
}
function fillRect(coOrdStr)
{
var canvas = byId('canvas2');
var hdc = canvas.getContext('2d');
var mCoords = coOrdStr.split(',');
var top, left, bot, right;
left = mCoords[0];
top = mCoords[1];
right = mCoords[2];
bot = mCoords[3];
var canvas = byId('myCanvas');
var tmp = hdc.fillStyle;
hdc.fillStyle = "rgba(255,0,0,0.3);";
hdc.fillRect(left,top,right-left,bot-top);
hdc.strokeRect(left,top,right-left,bot-top);
hdc.fillStyle = tmp;
}
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function fillPoly(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var i, n;
n = mCoords.length;
var canvas = byId('canvas2');
var hdc = canvas.getContext('2d');
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i=2; i<n; i+=2)
{
hdc.lineTo(mCoords[i], mCoords[i+1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
tmp=hdc.fillStyle;
hdc.fillStyle = "rgba(255,0,0,0.3);";
hdc.stroke();
hdc.fill();
hdc.fillStyle = tmp;
}
</script>
<style>
body
{
background-color: gray;
}
#canvas1
{
cursor: crosshair;
}
#canvas2
{
pointer-events: none; /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
position: absolute;
}
.heading
{
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body onload='myInit();'>
<div align='center'>
<img src='http://i.stack.imgur.com/Rw5pL.png' id='img1' usemap='#imgMap1'/>
<map name='imgMap1' id='imgMap1'>
</map>
<canvas id='canvas2'></canvas>
<canvas id='canvas1' width='200' height='200'></canvas>
<br>
<input type='button' onclick='myClear();' value='clear'/>
<input type='button' onclick='myAddShapePoly();' value='addPolygon (3+ points)'/>
<input type='button' onclick='myAddShapeRect();' value='addRect (2 points)'/>
<br>
<span id='coords'></span>
</div>
</body>
</html>
Google OCR .net et à partir de là. – Icarus
Je ne veux pas reconnaître les caractères. Je veux juste sélectionner une zone sur une image comme le site exemple ci-dessus. – mrd
@JeevanJose - dites quoi? S'il vous plaît jeter un oeil à ce lien: http://epaper.dawn.com/2013/08/01/pages/01_08_2013_001.jpg La page utilise une image-carte. Il est assez facile de créer un outil html qui permettra à un utilisateur de définir ses propres polygones/rectangles dans le même but. Malheureusement, c'est un processus manuel pour définir chacun d'entre eux - I.e minimum de 3 clics par zone - 2 pour les coins opposés, 1 pour ajouter le rectangle défini à la liste des polygones sur la page. – enhzflep