IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Redimensionner une image avec getElementByID


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Gunner4902
    Invité(e)
    Par défaut Redimensionner une image avec getElementByID
    Bonjour,
    Il y a quelques mois une personne du forum m'a montré comment centrer une image dynamique qui n'a pas toujours la meme taille dans une page web grace à getElementByID :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    document.getElementById('img').style.marginLeft=(document.prenom_image.width*-1/2);
    document.getElementById('img').style.marginTop=(-1*(document.prenom_image.height/2));
    J'aimerai connaitre le code pour agrandir l'image à 120% par exemple… toujours en utilisant le code suscité pour centrer l'image redimensionnée après.

    Merci

  2. #2
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    curieux le code que tu as posté (sans doute parce qu'il manque le contexte dans lequel il est utilisé )

    Sinon pour agrandir ton image, il s'agit d'une opération :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
     
    document.prenom_image.width = parseInt(document.prenom_image.width)*(1+1.2); // (w+w*120/100)
    document.prenom_image.height = parseInt(document.prenom_image.height)*(1+1.2); //(h+h*120/100)

  3. #3
    Gunner4902
    Invité(e)
    Par défaut
    Citation Envoyé par Auteur Voir le message
    curieux le code que tu as posté (sans doute parce qu'il manque le contexte dans lequel il est utilisé )
    Voici le code entier :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $root = "images";
    $folder = scandir($root);
    $folder = array_diff($folder, array(".", "..", "Thumbs.db"));
    $fo = array_rand($folder);
    $file = glob("$root/$folder[$fo]/*.{jpg,jpe,jpeg,jfif}", GLOB_BRACE);
    $fi = array_rand($file);
    list($width, $height, $type, $attr) = getimagesize("".$file[$fi]."");
    echo utf8_encode("<div id=\"img\"><img src=\"".$file[$fi]."\"  $attr name=\"prenom_image\" /></div>");


    Et merci pour le code

  4. #4
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    c'est du PHP, je n'y comprends rien

    Sinon la solution que j'ai posté te convient ?

  5. #5
    Gunner4902
    Invité(e)
    Par défaut
    Voici le code PHP commenté
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    $root = "images";  //désignation de la racine
    $folder = scandir($root);  //on scanne les dossiers et fichiers de la racine
    $folder = array_diff($folder, array(".", "..", "Thumbs.db"));  // on élimine . .. et Thumbs.db
    $fo = array_rand($folder); // on prend un dossier au hasard
    $file = glob("$root/$folder[$fo]/*.{jpg,jpe,jpeg,jfif}", GLOB_BRACE);  // on liste les noms des fichiers contenu dans le dossier aléatoire en ne retenant que les images jpg, jpe, jpeg et jfif et en supprimant l'extension
    $fi = array_rand($file);  // on prend une image aléatoire
    list($width, $height, $type, $attr) = getimagesize("".$file[$fi].""); //on retourne les informations de l'image pour renseigner l'attribut servant à JavaScript
    echo utf8_encode("<div id=\"img\"><img src=\"".$file[$fi]."\"  $attr name=\"prenom_image\" /></div>");// on encode en UTF-8 le nom de l'image qui est le nom du fichier sans l'extension
    Sinon, ton code me convient tout à fait, il est en pratique dans ma page d'ailleurs Mais j'ai du modifier quelquechose, car 1+1.2 = 100% + 120% = 220%, donc j'ai simplement mis 1.2
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.prenom_image.width = parseInt(document.prenom_image.width)*(1.2);

  6. #6
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par Gunner4902 Voir le message
    Sinon, ton code me convient tout à fait, il est en pratique dans ma page d'ailleurs Mais j'ai du modifier quelquechose, car 1+1.2 = 100% + 120% = 220%, donc j'ai simplement mis 1.2
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.prenom_image.width = parseInt(document.prenom_image.width)*(1.2);
    euh augmenter une valeur de 120% c'est réaliser le calcul suivant :
    W = w +w*120/100 = w*(1+1.2)

    les pourcentages
    ajouter un pourcentage : Augmenter un nombre de p%, c'est lui ajouter p% de lui-même. Ainsi, augmenter 350 de 18%, c'est calculer 350+350×18/100=350×1,18=413.

  7. #7
    Gunner4902
    Invité(e)
    Par défaut
    Citation Envoyé par Gunner4902 Voir le message
    J'aimerai connaitre le code pour agrandir l'image à 120% par exemple
    [Me Capello]"à 120%" pas "de 120%" [/Me Capello]

  8. #8
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par Gunner4902 Voir le message
    [Me Capello]"à 120%" pas "de 120%" [/Me Capello]
    oui, comme quoi les pourcentages ne tiennent qu'à un mot

  9. #9
    Gunner4902
    Invité(e)
    Par défaut
    Oui, rire

Discussions similaires

  1. Réponses: 3
    Dernier message: 13/03/2015, 00h45
  2. [PIL] redimensionner une image avec resize
    Par nicolivier dans le forum Général Python
    Réponses: 12
    Dernier message: 06/04/2013, 17h20
  3. Réponses: 1
    Dernier message: 13/02/2010, 18h49
  4. Comment redimensionner une image avec GD ?
    Par pdtor dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 04/12/2009, 12h08
  5. [GD] Redimensionner une image avec une taille fixe
    Par Aspic dans le forum Bibliothèques et frameworks
    Réponses: 29
    Dernier message: 20/07/2008, 14h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo