Forum « problèmes de prévisualisation et redimentionnement d'une image »

Forum « Programmation Javascript » (archives)

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

Envoyé: 17 janvier 2005, 15h53 par dark666

salut,
Tout d'abord bravo pour ce site qui m'a permis de me faire les dents en javascript, je développe en php.Mon code :un formulaire (upload), et comme je veux allèger mon serveur quoi de plus normale de faire un contrôle de taille
et une prévisualisation d'un photo avec redimentionnement. j'ai donc fait un code en laissant mes remarques.
Il y a 2 problèmes à mon code c'est qu'il fonctionne si il y a un 'confirm' ou un 'alert' (si on l'enlève ça ne fonctionne pas),
Et le 2ème problème c'est que la prévisualisation fonctionne pour certaines images ou parfois même aléatoirement (peut-être faut-il 'réactiver' la page afin que certains paramètres JS soit pris en compte?) voici mon code :

<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

if (imageX>100 || imageY>100) // vérifie si la largeur ou la hauteur de l'image est supérieur à 100 pour afficher la miniature
{
if (imageX>=imageY) // Calcule de la réduction et du ratio de l'image
{ // 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)

// CONFIRMATION
var ok= confirm("confirmez votre choix");
if (ok==false) {
elemImage.src= "PHOTOS/nophoto.jpg";
document.images["avatar"].width = 100;
document.images["avatar"].height= 100;
}
// récupération du poids de l'image dans l'élément html
var poidsImage= elemImage.fileSize;
// test si poids > 150 Ko
if (poidsImage > 150*1024)
{
// 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";
}
window.location.reload();
}
</script>
</head>
<body>
<img src="nophoto.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>

Merci d'avances de vos réponses et meilleurs voeux 2005 à tous!

DARK666

Réponses

Re: problèmes de prévisualisation et redimentionnement d'une image	Oznog	19/1/2005
Re: problèmes de prévisualisation et redimentionnement d'une image	leica69	28/5/2005
ERRATUM : problèmes de prévisualisation et redimentionnement d'une image	dark666	17/1/2005