Trucsweb.com

Forum de discussion

 Forum « Programmation Javascript » (archives)

Re: problèmes de prévisualisation et redimentionnement d'une image

Envoyé: 19 janvier 2005, 7h42 par Oznog


Salut,

Je ne voudrait pas gâcher ton plaisir mais tu ne soulage en rien le serveur avec ce code. Le code est en fait absolument inutile côté serveur.

Le Javascript, l'usage de l'objet "Image" et la modification de ces propriétés "height" et "height" ne change que l'affichage dans le navigateur de l'image. L'image physique reste tout aussi lourde lors du transfert et sur le serveur.

À la limite ce code pourrait passer les dimensions réel de l'image au serveur en même temps que le upload mais c'est aussi inutile puisque tant le PHP que le ASP peuvent obtenir ces informations avec seulement l'image (tout comme le Javascript).

Donc la seule utilité de ton code et de visualiser l'image qui sera ensuite tranféré sur le serveur. Et ton petit ajustement ne sert que pour restreindre son affichage dans le cas d'une image trop grande! Ce qui peut s'avérer effectivement pratique mais ne change rien aux dimensions de l'image réellement transféré. Ça ne change donc rien au serveur. Et aussi ton petit test de poids, alors là vrament intéressant dans la mesure ou une mauvaise connexion peut perdre beaucoup de temps à uploader une image trop lourde qu'un script serveur limitera à un certain poids en fin de compte. Une perte de temps que ton code peut nous éviter.

Voilà le code sans confirmation :

<html>
<head>
<script type="text/javascript">
function verifPoids_redimentionimage(photo) { // NE MARCHE PAS SOUS MOZILLA ET NETSCAPE (mais execute quand même l'upload)
// récupération de l'élément html dans lequel on affichera l'image à uploader
var elemImage= document.images("avatar");

// remplacement de l'image par changement de l'url source
elemImage.src= photo.value; // chemin = chemin relatif

// REDIMENTIONNEMENT DE L'IMAGE (Ratio:100)
var oImg = new Image();
oImg.src= photo.value
var imageX = oImg.width // largeur en pixels de l'image
var imageY = oImg.height // hauteur en pixels de l'image

// vérifie si la largeur ou la hauteur de l'image est supérieur à 100 pour afficher la miniature
if (imageX>100 || imageY>100) { // Calcule de la réduction et du ratio de l'image
if (imageX>=imageY) { // si l'image est de type paysage
imageY=(imageY/imageX)*100; // mettre la déclaration dans cette ordre car si c'est inversé la valeur 100 serait compter au lieu de la valeur 1024
imageX=100;
} else { // si l'image est de type portrait
imageX=(imageX/imageY)*100;
imageY=100;
}
}

document.images["avatar"].width = imageX; // affichage de l'image en pixels en largeur (X)
document.images["avatar"].height = imageY;// affichage de l'image en pixels en hauteur (Y)

var poidsImage = elemImage.fileSize;
if (poidsImage > 150*1024) { // test si poids > 150 Ko
// message d'alerte avec poids converti en Ko
alert("Fichier trop gros ! ("+ Math.floor(poidsImage/1024) +" Ko)");
document.images["avatar"].width = 100;
document.images["avatar"].height= 100;
// remplacement par l'image d'origine
elemImage.src= "nophoto.jpg";
}
}
</script>
</head>
<body>
<img src="images/f_acc1.jpg" name="avatar" id="avatar" style="border:1px solid black;">
<form method="post" name="formulairecompte" enctype="multipart/form-data" action="testupload.html">
<input name="fichier" type="file" onchange="verifPoids_redimentionimage(this)">
</form>
</body>
</html>


Ciao
Oznog


Réponses

 sp spRe: problèmes de prévisualisation et redimentionnement d'une image leica6928/5/2005
Aucun médias sociaux
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte