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

Forum « Programmation Javascript » (archives)

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

Envoyé: 19 janvier 2005, 18h40 par dark666

salut Oznog,

Tout d'abord merci de m'avoir répondu aussi rapidement.

Désolé de ne pas m'être exprimé clairement la dernière fois!
En effet,le code que j'ai réalisé sert d'une part, à visualiser une image réduite (pour des raisons de mise en page) et d'autre part, à empêcher l'upload côté client (donc de pas faire travailler le serveur) si une image dépasse la limite de taille

Le code que tu m'as corrigé je l'avais malheureusement déjà fait et comme tu le constateras a 2 soucis majeurs :

1 - si tu charges une première fois une image en dépassante sa limite de taille, tu t'apercevras qu'il l'affichera sans rien remarquer, puis si tu recharges une autres image tout aussi lourde, il t'affichera en effet une 'alerte' mais celle de la 1ère image :(

2 - concernant l'affichage en miniature, certaines images s'affichent d'autres pas souvent au 1er chargement :(

J'ai cherché des solutions depuis plusieurs semaines mais en vain, si tu avais une idée, car là je suis à court.... :(

Merci d'avance de ta réponse et de ta patience

DARK666

nb : y a t-il une solution pour le faire fonctionner aussi sous mozilla et netscape?

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