DESSINER UN RECTANGLE SUR UNE IMAGE
philou0075
Messages postés
2
Date d'inscription
samedi 26 mars 2005
Statut
Membre
Dernière intervention
27 mars 2005
-
27 mars 2005 à 06:10
pastis51forever Messages postés 172 Date d'inscription dimanche 29 juin 2003 Statut Membre Dernière intervention 8 septembre 2006 - 21 janv. 2010 à 23:26
pastis51forever Messages postés 172 Date d'inscription dimanche 29 juin 2003 Statut Membre Dernière intervention 8 septembre 2006 - 21 janv. 2010 à 23:26
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/24374-dessiner-un-rectangle-sur-une-image
https://codes-sources.commentcamarche.net/source/24374-dessiner-un-rectangle-sur-une-image
21 janv. 2010 à 23:26
J'ai ajouté quelques petits trucs à cette source (et enlevé la compatibilité avec ie, je pouvais pas la vérifier, pas équipé...):
- coloration du rectangle
- Le rectangle peut être modifié après coup grace aux poignées dans les coins
- Le rectangle peut être déplacé (une fois dessiné) en cliquant dessus (sauf sur les coins, bien sûr...)
- L'image peut être affichée de manière réduite grace à maxWidth et maxHeight, les données qui en sortent étant forcément moins précises, puisqu'arrondies, mais ca permet de travailler sur des photos qui sortent des APN récents
- 4 champs ont étés rajoutés, (que j'utilise moi en masqué, pour envoyer à php qui s'occupe de retailler) donnant les coordonnées des points supérieur gauche et inférieur droit
Du coup, ca fait beaucoup de modifs, mais si l'auteur veut mettre à jour sa source, qui m'a aidé comme base, ainsi que les 2 modifs proposées en commentaire, après l'avoir optimisée pour ie & co, si ca le chante, c'est toujours mieux que de démultiplier les sources.
Voila le code:
<html>
<head>
<style type='text/css'>
#mask
{
position: absolute;
border: solid 1px #000000;
background-color:rgba(150,150,256,0.3);
overflow:hidden;
}
#mask div{
position:absolute;
background-color:rgba(150,150,150,0.4);
width:20px;
height:20px;
}
#mask div#tl{
border-right: solid 1px #666666;
border-bottom: solid 1px #666666;
top:0;
left:0;
cursor:nw-resize;
}
#mask div#tr{
border-left: solid 1px #666666;
border-bottom: solid 1px #666666;
top:0;
right:0;
cursor:ne-resize;
}
#mask div#bl{
border-right: solid 1px #666666;
border-top: solid 1px #666666;
bottom:0;
left:0;
cursor:sw-resize;
}
#mask div#br{
border-left: solid 1px #666666;
border-top: solid 1px #666666;
bottom:0;
right:0;
cursor:se-resize;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
/*****************************/
// Parameters that allow to use this on a thumbnail
var maxWidth = 600;
var maxHeight = 400;
// End of the parameters
/*****************************/
/*****************************/
// Don't change these elements
var factor = 1; var width 0;height 0; var x1 0;var y1 0;var x2 = 0;var y2 = 0; var minX 0;var maxX 0;var minY = 0;var maxY = 0; var startX 0;var startY 0;
var isDrawing = false;
var isMoving = false;
var isDrawn = false;
var selectedCorner = '';
/*****************************/
/*
* initialization of the events
**/
function init(){
document.images.obj.onmousedown=startRedimMask;
document.images.obj.onmousemove=redimMaskSelect;
document.getElementById("mask").onmousedown=startMoveMask;
document.getElementById("mask").onmousemove=moveMask;
document.getElementById("mask").onmouseup=endRedimMask;
document.getElementById("tl").onmousedown=startRedimMaskTL;
document.getElementById("tl").onmousemove=redimMaskSelect;
document.getElementById("tl").onmouseup=endRedimMask;
document.getElementById("tr").onmousedown=startRedimMaskTR;
document.getElementById("tr").onmousemove=redimMaskSelect;
document.getElementById("tr").onmouseup=endRedimMask;
document.getElementById("bl").onmousedown=startRedimMaskBL;
document.getElementById("bl").onmousemove=redimMaskSelect;
document.getElementById("bl").onmouseup=endRedimMask;
document.getElementById("br").onmousedown=startRedimMaskBR;
document.getElementById("br").onmousemove=redimMaskSelect;
document.getElementById("br").onmouseup=endRedimMask;
}
function startMoveMask(evt){
if(isDrawing || !isDrawn){
return false;
}
isMoving = true;
decayX = evt.clientX-x1;
decayY = evt.clientY-y1;
return false;
}
function moveMask(evt){
if(!isMoving){
return false;
}
var newX=0;
newX = evt.clientX - decayX;
var maskWidth = x2 - x1;
if(newX >= minX && newX + maskWidth <= maxX){
document.getElementById("mask").style.left = newX;
}else if(newX >= minX){
document.getElementById("mask").style.left = maxX - maskWidth;
}else{
document.getElementById("mask").style.left = minX;
}
var newY=0;
newY = evt.clientY - decayY;
var maskHeight = y2 - y1;
if(newY >= minY && newY + maskHeight <= maxY){
document.getElementById("mask").style.top = newY;
}else if(newY >= minY){
document.getElementById("mask").style.top = maxY - maskHeight;
}else{
document.getElementById("mask").style.top = minY;
}
}
function redimMaskSelect(evt){
if(!isDrawing){
return false;
}
return redimMask(evt);
}
function startRedimMaskTL(evt){
selectedCorner = 'TL';
return startRedimMaskFromCorners(evt);
}
function startRedimMaskTR(evt){
selectedCorner = 'TR';
return startRedimMaskFromCorners(evt);
}
function startRedimMaskBL(evt){
selectedCorner = 'BL';
return startRedimMaskFromCorners(evt);
}
function startRedimMaskBR(evt){
selectedCorner = 'BR';
return startRedimMaskFromCorners(evt);
}
function startRedimMaskFromCorners(evt){
isDrawing = true;
startX = evt.clientX;
startY = evt.clientY;
return false;
}
function startRedimMask(evt){
isDrawing = true;
var newX=0;
var newY=0;
newX = evt.clientX;
newY = evt.clientY;
// placement du calque
document.getElementById("mask").style.top = newY+"px";
document.getElementById("mask").style.left = newX+"px";
document.getElementById("mask").style.width = "0px";
document.getElementById("mask").style.height = "0px";
//position = Array(newX,newY,newX,newY);
startX = newX;
startY = newY; x1 x2 newX; y1 y2 newY;
return false;
}
function redimMask(evt){
var newX=0;
var newY=0;
var width = 0;
var height = 0;
newX = evt.clientX;
newY = evt.clientY;
if(isDrawn){
if(selectedCorner == 'TL'){
startX = x2;
startY = y2;
}else if(selectedCorner == 'TR'){
startX = x1;
startY = y2;
}else if(selectedCorner == 'BL'){
startX = x2;
startY = y1;
}else if(selectedCorner == 'BR'){
startX = x1;
startY = y1;
}
}
if(newX < startX){
// From right to left
document.getElementById("mask").style.left = newX+"px";
width = startX - newX;
}else{
// From left to right
document.getElementById("mask").style.left = startX+"px";
width = newX - startX;
}
document.getElementById("mask").style.width = width+"px";
if(newY < startY){
// From right to top
document.getElementById("mask").style.top = newY+"px";
height = startY - newY;
}else{
// From left to bottom
document.getElementById("mask").style.top = startY+"px";
height = newY - startY;
}
document.getElementById("mask").style.height = height+"px";
return false;
}
function endRedimMask(evt){
isDrawing = false;
isMoving = false;
isDrawn = true;
var obj = document.getElementById("obj");
var mask = document.getElementById("mask");
// Positions on the screen
x1 = parseFloat(mask.style.left);
x2 = parseFloat(mask.style.width) + x1;
y1 = parseFloat(mask.style.top);
y2 = parseFloat(mask.style.height) + y1;
// Positions on the image
var realx1 = x1 - minX;
var realx2 = x2 - minX;
var realy1 = y1 - minY;
var realy2 = y2 - minY;
// Real positions (using the factor)
document.getElementById("startCropX").value = Math.round(realx1 * factor);
document.getElementById("startCropY").value = Math.round(realy1 * factor);
document.getElementById("stopCropX").value = Math.round(realx2 * factor);
document.getElementById("stopCropY").value = Math.round(realy2 * factor);
}
function GetRealOffsetLeft(inOBJ){
var oObj = inOBJ;
var iVal = 0;
while (oObj && oObj.tagName != "BODY") {
iVal += oObj.offsetLeft;
oObj = oObj.offsetParent;
}
return iVal;
}
function GetRealOffsetTop(inOBJ){
var oObj = inOBJ;
var iVal = 0;
while (oObj && oObj.tagName != "BODY") {
iVal += oObj.offsetTop;
oObj = oObj.offsetParent;
}
return iVal;
}
function prepareDrawing(img){
init();
width = img.width;
height = img.height; var xFactor 1;var yFactor 1;
if(maxWidth > 0 && (width > maxWidth)){
xFactor = width / maxWidth;
}
if(maxHeight > 0 && height > maxHeight){
yFactor = height / maxHeight;
}
if(xFactor > yFactor){
img.width = maxWidth;
factor = xFactor;
}else if(yFactor > xFactor){
img.height = maxHeight;
factor = yFactor;
}
width = width / factor;
height = height / factor;
// Now that the image is loaded, we also have to set the minimums
var offsetLeft = GetRealOffsetLeft(obj);
var offsetTop = GetRealOffsetTop(obj);
minX = offsetLeft;
maxX = offsetLeft + width;
minY = offsetTop;
maxY = offsetTop + height;
}
//-->
</script>
</head>
</html>
Et du coup, désolé pour la longueur du commentaire... Et j'espère n'avoir pas oublié des bouts de test...
12 nov. 2009 à 09:05
12 nov. 2009 à 09:02
function getZone(img, mask) {
var src = document.images[img];
var target = document.getElementById(mask);
/* Ne pas oublier ici que le 560 est la valeur de la hauteur de l'image */
/* donc ont doit la modifier selon la hauteur si l'image change */
var hauteur = (document.getElementById(mask).offsetHeight);
var largeur = (document.getElementById(mask).offsetWidth);
var x1 = (GetRealOffsetLeft(target) - GetRealOffsetLeft(src));
var x2 = (x1 + largeur);
var y1 = GetRealOffsetTop(target) - GetRealOffsetTop(src);
var y2 = y1 + hauteur;
var str "X1 " + x1; str +"\nX2 " + x2; str +"\nY1 " + y1; str +"\nY2 " + y2;
str += "\n";
str +"\n(X1,Y1) (" + x1;
str += "," + y1;
str += ")";
str +"\n(X2,Y1) (" + x2;
str += "," + y1;
str += ")";
str +"\n(X1,Y2) (" + x1;
str += "," + y2;
str += ")";
str +"\n(X2,Y2) (" + x2;
str += "," + y2;
str += ")";
str += "\n"; str +"\nHauteur " + (document.getElementById(mask).offsetHeight); str +"\nLargeur " + (document.getElementById(mask).offsetWidth);
alert(str);
}
Auparavant, le coin 0 pour x était à gauche et le point 0 pour y en bas, ce que je trouvais illogique. Plus besoin de définir la hauteur de l'image si elle diffère également. Je vote car ça m'a bien servi. La possibilité de redéfinir l'emplacement et la taille du champ div défini serait une bonne fonctionnalité; ainsi que de définir une image qui change sur ce div également. Merci.
25 oct. 2007 à 00:15
25 oct. 2007 à 00:11
Il suffit de remplacer la fonction runDraw par celle-ci et celà devrait fonctionner à merveille
/*****************************/
/*
* runDraw : "drag&drop" (+/-)
**/
function runDraw(evt)
{
// j'ai déplacé le test en début de proc
if(curElement == null) return false;
var e = null;
var newX=0;
var newY=0;
// j'ai rajouté ces deux variables qui me permettent de calculer la hauteur et largeur du cadre
var width = 0;
var height = 0;
// IE
if(document.all)
{
e = window.event;
newX = e.x;
newY = e.y;
}
// Mozilla
else
{
e = evt;
newX = e.clientX;
newY = e.clientY;
}
///////////////
//modif
//////////////
if(newX<startPos[0]){ // si la souris est à gauche du point de départ, on déplace le cadre vers la nouvelle coordonnée
document.getElementById("mask").style.left = newX+"px";
width = startPos[0] - newX;
}
else{ // sinon, on déplace le cadre en son point d'origine
document.getElementById("mask").style.left = startPos[0]+"px";
width = newX - startPos[0];
}
if(newY<startPos[1]){ // si la souris est en haut du point de départ, on déplace le cadre vers la nouvelle coordonnée
document.getElementById("mask").style.top = newY+"px";
height = startPos[1] - newY;
}
else{ // sinon, on déplace le cadre en son point d'origine
document.getElementById("mask").style.top = startPos[1]+"px";
height = newY - startPos[1];
}
/////////////////////
// fin modifs
/////////////////////
// resize du calque
document.getElementById("mask").style.width = width +"px";
document.getElementById("mask").style.height = height +"px";
return false;
}
21 avril 2007 à 13:59
super code, c'est ca que je cherchais...
merci encore
29 août 2006 à 10:22
merci
12 mai 2005 à 05:40
La fille de l'image ? ;-)
Si la fille vaut 10, toi tu vaux bien un petit 9.
27 mars 2005 à 06:10