Zoom dans une image

**ckidon** · 14/05/2024, 00h31

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

**ASCIIDEFOND** · 16/05/2024, 18h22

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>

**Dave Hiock** · 16/05/2024, 18h54

\ô/

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

**ASCIIDEFOND** · 16/05/2024, 21h21

Envoyé par Dave Hiock

@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()
        }

**ckidon** · 17/05/2024, 19h41

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

**ckidon** · 18/05/2024, 00h53

J'ai trouvé un script et je l'ai adapté à mes besoins !
Merci pour votre aide !
A+

**NoSmoking** · 19/05/2024, 10h13

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

**ckidon** · 19/05/2024, 20h37

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