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 :

Découpage images et adaptation suivant le bloc


Sujet :

JavaScript

  1. #1
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut Découpage images et adaptation suivant le bloc
    Bonjour,

    Je suis entrain de faire un projet sous angular js.
    Maintenant, je suis entrain de faire l'optimisation des images (galerie photo).
    si j'ai une image plus grand en hauteur, On fait le couper en haut et en bas.
    Si l'image est plus grand en largeur, on fait le couper à droite et à gauche voir pièce jointe. Nom : image opt.png
Affichages : 85
Taille : 5,5 Ko

    voila que j'ai fait:


    1. J'ai fixé fixer le bloc d'insertion des 10 images ( l'hauteur et la largeur) pour tous les devices : comme j'ai noté dans le deriner email. coté css)


    2. pour chaque bloc cad pour chaque image j'ai ajouté à chaque bloc un background cad celle de limages on doit afficher que la partie qu'on a ficé normalement dans controlleurs (js): coté html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <div class="galeryProfilBusiness">
        <div class="item jq-item-sz" ng-repeat="im in userprofile.profile.images" ng-class="{active : $first}"   ng-click="openGallery(userprofile.profile.images)" ng-style="{'background': 'url(<a href="http://www.exemple.com/api/picture/&#39;+im+" target="_blank">http://www.exemple.com/api/picture/'+im+</a>') no-repeat center transparent', 'background-size': ''+x+' '+y+''}">
     
        </div>
    </div>
    3. pour le controleurs: j'ai testé le travail par exemple si la largeur est plus grand que l'hauteur ou le contraire je trouve une resultat bonne mais statiquement j'ai fais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //decoupage image
            var larg= 500; // des valeurs statiques
            var haut= 100;
            if (larg> haut*2)
            {
                $scope.x='10%'; // c'est juste exemple
                $scope.y='11%';
            }
            else{
                $scope.x='20%';// c'est juste exemple
                $scope.y='21%';
            }
    maintenant, je dois trouver une solution comment recuperer l'hauteur et largeur de image pour mettre dans le scoop : pour etre dynamique pas statique.
    càd avant de l'afficher sur l'ecran car en réeel l'image dans le controleurs c'est come si une chaine de caractere pas une image pour trouver la largeur et l'hauteur
    Ma question: si vous avez une methode pour savoir la largeur et l'hauteur de image avant l'upload.

    merci de me repondre

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 664
    Points
    44 664
    Par défaut
    Bonjour,
    pourquoi ne pas traiter cela en CSS

    Réduire une image sans la déformer

Discussions similaires

  1. Générer une image du contenu d'un bloc
    Par Zingzing56 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 10/02/2012, 08h24
  2. [Débutant] Découpage d'une matrice en petits blocs
    Par macErmite dans le forum MATLAB
    Réponses: 5
    Dernier message: 31/12/2011, 18h54
  3. Faire défiler 3 images avec boutons suivant/précédent
    Par Skkkd dans le forum Composants graphiques
    Réponses: 15
    Dernier message: 25/03/2011, 11h51
  4. Image de fond sur un bloc
    Par rjl dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 01/02/2009, 23h08
  5. Image map CSS sur les bloc
    Par Momodedf dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 11/07/2008, 17h08

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