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
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
|