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 :

Zoom dans une image


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2021
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2021
    Messages : 7
    Points : 6
    Points
    6
    Par défaut Zoom dans une image
    Bonjour à tous !
    Je débute et je souhaite votre aide pour permettre à l'utilisateur de zoomer dans une image avec la molette de sa souris.
    Je ne veux pas que les dimensions de l'image change (si elle fait 600x400 ça ne bouge pas), mais en positionnant sa souris sur l'image et en activant la molette, l'internaute peut zoomer dans l'image.
    Merci d'avance pour votre aide !
    Emma

  2. #2
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Points : 439
    Points
    439
    Par défaut
    Salut ckidon,

    Un effet zoom un peu comme ça ?
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
     
            #container {
                margin: 20px auto;
                display: flex;
                border: 2px solid rgb(255, 4, 4);
            }
     
            #zoneimg {
                width: 200px;
                height: 200px;
                border: 1px solid #fdfdfd;
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
     
    <body>
        <div id="container">
            <canvas id="principal-Img"></canvas>
            <canvas id="zoneimg"></canvas>
        </div>
        <script>
            var container = document.getElementById('container'),
                canvasImg = document.getElementById('principal-Img'), zoom = [1, 1], convasPrincipal;
     
            //Chargement et redimensionnement de l'image
            var img = new Image();
            img.src = 'https://unsplash.it/800?random';
            var maxWidth = 1000;
            var maxHeight = 800;
     
            if (img.width > img.height) {
                if (img.width > maxWidth) {
                    img.height *= maxWidth / img.width;
                    img.width = maxWidth;
                }
            } else {
                if (img.height > maxHeight) {
                    img.width *= maxHeight / img.height;
                    img.height = maxHeight;
                }
            }
     
            img.onload = function () {
                imagePrincipale(img);
            };
     
            function zoneselction() {
                let ttop, lleft, c;
     
                c = {
                    top: event.clientY + (zoneimg.clientHeight / 2),
                    left: event.clientX + (zoneimg.clientWidth / 2),
                    minLeft: canvasImg.offsetLeft + (zoneimg.offsetWidth),
                    minTop: canvasImg.offsetTop + (zoneimg.offsetHeight),
                    maxLeft: canvasImg.offsetWidth + canvasImg.offsetLeft,
                    maxTop: canvasImg.offsetHeight + canvasImg.offsetTop,
                }
     
                c.left = c.left < c.minLeft ? c.minLeft : c.left > c.maxLeft ? c.maxLeft : c.left;
                c.top = c.top < c.minTop ? c.minTop : c.top > c.maxTop ? c.maxTop : c.top;
     
                zoneimg.style.top = `${c.top - (zoneimg.offsetHeight)}px`;
                zoneimg.style.left = `${c.left - (zoneimg.offsetWidth)}px`;
     
                lleft = (c.left - (zoneimg.offsetWidth)) - (convasPrincipal.offsetLeft) + 1;
                ttop = (c.top - (zoneimg.offsetHeight)) - (convasPrincipal.offsetTop) + 1;
     
                cloneCanvas(convasPrincipal, lleft, ttop, 200, 200, zoom[0], zoom[1])
            }
     
            container.onmousemove = function (event) { zoneselction() }
     
            container.onwheel = function (event) {
                event.preventDefault();
                if ((zoom[0] + Math.sign(event.deltaY)) >= 1) {
                    if (zoom[0] < 15) {
                        zoom[0] += Math.sign(event.deltaY);
                    } else {
                        zoom[0] -= 1;
                    }
                    zoom[1] = zoom[0];
                    zoneselction()
                }
            }
     
            function imagePrincipale(image) {
                convasPrincipal = document.getElementById('principal-Img');
                let width = image.width, height = image.height, ctx;
     
                convasPrincipal.width = width;
                convasPrincipal.height = height;
                convasPrincipal.style.position = "absolute";
     
                container.style.width = width + "px";
                container.style.height = height + "px";
                container.style.maxHeight = height + "px";
     
                ctx = convasPrincipal.getContext('2d');
                ctx.drawImage(image, 0, 0, width, height);
                cloneCanvas(convasPrincipal, 1, 1, 200, 200, 1, 1);
            }
     
            function cloneCanvas(oldCanvas, x, y, widtH, heighT, a, b) {
                let newCanvas = document.getElementById('zoneimg'), context, xOffset = x, yOffset = y, wp, hp;
     
                newCanvas.width = widtH;
                newCanvas.height = heighT;
                context = newCanvas.getContext('2d');
                context.scale(a, b); //zoom          
                wp = Math.pow(widtH, 2)
                hp = Math.pow(heighT, 2)
     
                if (zoom[0] > 1) {
                    xOffset = (x + (wp / 1000)), yOffset = (y + (hp / 1000));
                }
                context.drawImage(oldCanvas, xOffset, yOffset, newCanvas.width, newCanvas.height, 0, 0, newCanvas.width, newCanvas.height);
                zoneimg = document.getElementById('zoneimg')
            }
     
        </script>
    </body>
     
    </html>

  3. #3
    Membre confirmé
    Homme Profil pro
    OoW
    Inscrit en
    Juin 2019
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : Juin 2019
    Messages : 137
    Points : 485
    Points
    485
    Par défaut
    \ô/
    Citation Envoyé par ckidon
    Je débute et je souhaite votre aide pour permettre ...
    Aide ou code complet ?

    @ASCIIDEFOND
    juste une petite remarque, par habitude en roulant la molette vers l'avant on zoom et une autre pourquoi être passé par un élément canvas.
    Quoiqu'il arrive le résultat correspond à ce qui est demandé.

  4. #4
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Points : 439
    Points
    439
    Par défaut
    Citation Envoyé par Dave Hiock Voir le message
    @ASCIIDEFOND
    ... pourquoi être passé par un élément canvas...
    Salut Dave Hiock,

    J'ai commencé par des balises <img> mais c'était un peu compliqué pour récupérer la zone et faire avec un effet zoom. De plus l'image était chargée deux fois.
    Avec les canvas et le clone d'une zone de l'image avec drawimage c'était bien plus simple pour gérer le zoom.
    Maintenant pour ce code, il y a surement plus simple et performant pour zoomer sur une image.

    Pour inverser le sens de la molette
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
            container.onwheel = function (e) {
                e.preventDefault();
                let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
     
                if (delta == 1 && zoom[0] < 15) {
                    zoom[0] += delta;
                } else if (delta == -1 && zoom[0] > 1) {
                    zoom[0] += delta
                }
                   zoom[1] = zoom[0];
                   zoneselction()
            }

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2021
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2021
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    Merci ASCIIDEFOND (énorme ce pseudo !!!)

    En fait je cherche quelque chose de plus simple.
    J'ai vu ça sur plusieurs sites, voilà un exemple : https://www.chronophoto.app/game.html mais malgré plein de tentatives (et d'aide de ChatGPT j'avoue) pour extraire cette fonctionnalité, je n'arrive pas à la reproduire :-(

    En tous cas merci pour ton aide !

    A+
    Emma

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2021
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2021
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    J'ai trouvé un script et je l'ai adapté à mes besoins !
    Merci pour votre aide !
    A+

  7. #7
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 033
    Points : 44 390
    Points
    44 390
    Par défaut
    Bonjour,
    J'ai trouvé un script et je l'ai adapté à mes besoins !
    tu pourrais nous en dire plus, ce qui pourrais en aider d''autres et pour notre culture générale

  8. #8
    Futur Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2021
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2021
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    Ah oui, désolé ! Si ça peut aider quelqu'un j'ai trouvé cette vidéo sur Youtube qui explique comment le faire et avec un code assez simple (pour moi) :-)


    a+
    Emma

  9. #9
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 033
    Points : 44 390
    Points
    44 390
    Par défaut
    cette vidéo sur Youtube qui explique comment le faire et avec un code assez simple (pour moi)
    Effectivement, il a besoin d'être adapté


    Je mets le lien vers le CodePen pour pouvoir tester : https://codepen.io/stack-findover/pen/VwPgQQr

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Zoom sur une image dans un formulaire
    Par jcp66 dans le forum IHM
    Réponses: 5
    Dernier message: 20/12/2016, 19h19
  2. Zoom dans plusieurs images sur une même frame
    Par GDMINFO dans le forum Beamer
    Réponses: 1
    Dernier message: 20/10/2010, 08h41
  3. Faire zoom d'une image contenu dans un bouton
    Par mercure07 dans le forum C++
    Réponses: 1
    Dernier message: 09/04/2010, 10h40
  4. Réponses: 6
    Dernier message: 14/05/2008, 15h35
  5. Réponses: 3
    Dernier message: 02/07/2004, 13h53

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