Trucsweb.com

Forum de discussion

 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>











Réponses

 sp spRe: Suite aux problèmes de prévisualisation et redimentionnement d'une image Oznog22/1/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