le X et Y sur un getimagedata d'un canvas ne me donne pas la bonne couleur

**patricktoulon** · 19/02/2017, 19h33

Bonsoir a tous
voila encore un soucis que je n'arrive pas a régler
j'ai donc pris pour parti de me séparer de mes table et inputs alignés par le flux dans un div pour créer ma palette perso

cela avec une image au départ dessiné sur un canvas on verra par la suite comment dessiner dessus ce canvas j'apprends petit a petit

et donc par le mouse move X/Y je capte le pixel visiblement le principe fonctionne mais je n'ai pas la bonne couleur

voici le code

Code :

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
 
<!DOCTYPE HTML >
<html lang="fr">
<head>
    <!--meta charset="utf-8"-->
    <title>patrick WYSIWYG html </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script>
        function draw() {
            document.getElementById('palcouleur').addEventListener("mousemove", getpixelcolor, false);
            var ctx = document.getElementById('palcouleur').getContext('2d');
            var img = new Image();
            img.src = "H:\\Imagess\\abstrait\\13.jpg";
            img.onload = function() {
                ctx.drawImage(img, 0, 0);
            }
            alert("initialisé");
        }
 
        function getpixelcolor(e) {
            var Kanvas = document.getElementById('palcouleur')
            var rect = Kanvas.getBoundingClientRect();
            X = e.pageX - rect.left;
            Y = e.pageY - rect.top;
            var ctx = Kanvas.getContext('2d');
            var c = ctx.getImageData(X, Y, 1, 1).data;
            var hex = "#" + ("000000" + rgbToHex(c[0], c[1], c[2])).slice(-6);
            document.getElementById("results").innerText = hex
            document.getElementById("results").style.backgroundColor = hex
        }
        function rgbToHex(r, g, b) {
            if (r > 255 || g > 255 || b > 255)
                throw "Invalid color component";
            return ((r << 16) | (g << 8) | b).toString(16);
        }
    </script>
</head>
<body>
    <canvas id="palcouleur" style="width:150px;height:150px;border:1px solid black;"></canvas>
    <BUTTON id="results" style="position:absolute;top:200px;left:2px;width:200px;height:40px;"></BUTTON>
    <script>
        draw();
    </script>
</body>
</html>

ps
edit:
je viens de dimensionner mon image avec les même dimensions du canvas et voila comment il me l'affiche

et surtout!! quand je me balade avec la souris sur la partie blanche il me donne la couleur qui devrait y être
pourquoi me le resize t il a la moitié en largeur ???????

Nom : Capture.JPG
Affichages : 167
Taille : 28,5 Ko

Nom : Capture.JPG
Affichages : 167
Taille : 28,5 Ko

**badaze** · 19/02/2017, 21h46

En fait ton souci vient de ce que l'image est déformée. Etonnamment la position du curseur donne la couleur qui devrait y être si l'image était bien proportionnée.

Essaie avec la fonction suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
        function draw() {
            document.getElementById('palcouleur').addEventListener("mousemove", getpixelcolor, false);
 
            var img = new Image();
            img.src = "saitek psr 98.jpg";
            img.onload = function() {
    document.getElementById('palcouleur').setAttribute('width', img.width);
    document.getElementById('palcouleur').setAttribute('height',img.height)
       var ctx = document.getElementById('palcouleur').getContext('2d');
                ctx.drawImage(img, 0, 0);
            }
            alert("initialisé");
        }

ATTENTION : Si ton image t'oblige à scroller les coordonnées x et y de la souris ne sont plus bonnes.

**patricktoulon** · 20/02/2017, 00h05

re
nikel badaze

pour le coup j'ai meme trouvé le moyen d'adapter n'importe quelle imege de nimporte quelle taille au canvas
j'aurais voulu memoriser dans les attribut mais je n'y suis pas arrivé alors 2 variables globale feront l'affaire

Code :

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
<!DOCTYPE HTML >
<html lang="fr">
<head>
    <!--meta charset="utf-8"-->
    <title>patrick WYSIWYG html </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script>
        var opX = 1
        var opY = 1
        function draw() {
 
            var Kanvas = document.getElementById('palcouleur');
            document.getElementById('palcouleur').addEventListener("mousemove", getpixelcolor, false);
            var rect = Kanvas.getBoundingClientRect();
            var img = new Image();
            img.src = "H:\\Imagess\\abstrait\\13.jpg";
            img.onload = function() {
                if ((rect.right - rect.left) / img.width > 0) {
                    opX = (rect.right - rect.left) / img.width;
                }
                if ((rect.bottom - rect.top) / img.eight > 0) {
                    opY = (rect.bottom - rect.top) / img.height;
                }
                img.wdth = img.wdth * opX;
                img.height = img.height * opY;
                //document.getElementById('palcouleur').setAttribute('wmult', opX);
                //document.getElementById('palcouleur').setAttribute('hmult', opY)
                document.getElementById('palcouleur').setAttribute('width', img.width);
                document.getElementById('palcouleur').setAttribute('height', img.height)
                var ctx = document.getElementById('palcouleur').getContext('2d');
                ctx.drawImage(img, 0, 0);
            }
            alert("initialisé");
        }
        function getpixelcolor(e) {
            var Kanvas = document.getElementById('palcouleur')
            var rect = Kanvas.getBoundingClientRect();
            X = (e.pageX - rect.left) / opX;
            Y = (e.pageY - rect.top) / opY;
            var ctx = Kanvas.getContext('2d');
            var c = ctx.getImageData(X, Y, 1, 1).data;
            var hex = "#" + ("000000" + rgbToHex(c[0], c[1], c[2])).slice(-6);
            document.getElementById("results").innerText = hex
            document.getElementById("results").style.backgroundColor = hex
        }
        function rgbToHex(r, g, b) {
            if (r > 255 || g > 255 || b > 255)
                throw "Invalid color component";
            return ((r << 16) | (g << 8) | b).toString(16);
        }
    </script>
</head>
<body>
    <canvas id="palcouleur" style="width:300px;height:150px;border:1px solid black;"></canvas>
    <BUTTON id="results" style="position:absolute;top:200px;left:2px;width:200px;height:40px;"></BUTTON>
    <script>
        draw();
    </script>
</body>
</html>

Nom : demo2.gif
Affichages : 167
Taille : 438,9 Ko

et pendant que tu préparait ta reponse j'avais fait le meme avec un gradient mais je n'arrive pas a le faire vertical

la meme chose avec un gradient
si tu a la solution pour le sens vertical je prends

merci pour tes retours

Code :

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
<!DOCTYPE HTML >
<html lang="fr">
<head>
    <!--meta charset="utf-8"-->
    <title>patrick WYSIWYG html </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script>
        function draw() {
            document.getElementById('palcouleur').addEventListener("mousemove", getpixelcolor, false);
            var ctx = document.getElementById('palcouleur').getContext('2d');
            var gradient = ctx.createLinearGradient(10, 10, 290, 120);
            gradient.addColorStop(0, "black"); // Départ
            gradient.addColorStop(0.2, "red"); // Intermédiaire
            gradient.addColorStop(0.3, "yellow"); // Intermédiaire
            gradient.addColorStop(0.4, "magenta"); // Intermédiaire
            gradient.addColorStop(0.5, "blue"); // Intermédiaire
            gradient.addColorStop(0.6, "green"); // Intermédiaire
            gradient.addColorStop(0.8, "yellow"); // Intermédiaire
            gradient.addColorStop(1, "white"); // Arrivée
            ctx.fillStyle = gradient; // Affectation au remplissage
            ctx.fillRect(0, 0, 300, 150);
        }
 
 
        function getpixelcolor(e) {
            var Kanvas = document.getElementById('palcouleur')
            var rect = Kanvas.getBoundingClientRect();
            X = (e.pageX - rect.left);
            Y = e.pageY - rect.top;
            var ctx = Kanvas.getContext('2d');
            var c = ctx.getImageData(Math.round(X), Math.round(Y), 1, 1).data;
            var hex = "#" + ("000000" + rgbToHex(c[0], c[1], c[2])).slice(-6);
            document.getElementById("results").innerText = "left : " + Math.round(X) + "  top : " + Math.round(Y);
            document.getElementById("results").style.backgroundColor = hex
        }
        function rgbToHex(r, g, b) {
            if (r > 255 || g > 255 || b > 255)
                throw "Invalid color component";
            return ((r << 16) | (g << 8) | b).toString(16);
        }
    </script>
</head>
<body>
    <canvas id="palcouleur" style="width:300px;height:150px;border:1px solid black;"></canvas>
    <BUTTON id="results" style="position:absolute;top:200px;left:2px;width:200px;height:40px;"></BUTTON>
    <script>
        draw();
    </script>
</body>
</html>

**badaze** · 20/02/2017, 00h14

Je ne comprends pas !

**patricktoulon** · 20/02/2017, 01h58

re
ben oui moi aussi j'ai tout essayé et rien y fait
mon projet:
c'est de faire une palette couleur avec un beau dégradé multicolore et un mode avancé avec un bouton qui ira chercher une image dans le DD pour faire une sorte de color picker
j'ai les deux mais je n'arrive pas a trouver la raison de cet oblique

**patricktoulon** · 20/02/2017, 02h29

re
c'est bon j'ai trouvé!!

se sont les deux dernier argument qu'il faut manipuler
il faut mettre dans le createlinearGradient:

la largeur en argument 3 et 0 en argument 4 pour vertical
la hauteur en argument4 et 0 en argument 3 pour horizontal
les deux pour l'oblique

Code :

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
function draw() {
 document.getElementById('palcouleur').addEventListener("mousemove" ,getpixelcolor,false);
 var maxlarge=document.getElementById('palcouleur').offsetWidth;
var maxheight=document.getElementById('palcouleur').offsetHeight;
var ctx = document.getElementById('palcouleur').getContext('2d');
 var gradient = ctx.createLinearGradient(0,0,maxlarge,0);///vertical
//var gradient = ctx.createLinearGradient(0,0,0,maxheight);//horizontal
//var gradient = ctx.createLinearGradient(0,0,maxlarge,maxheight);//vertical oblique
gradient.addColorStop(0,"black");     // Départ
gradient.addColorStop(0.2,"rgb(255,100,100)"); // Intermédiaire
gradient.addColorStop(0.3,"blue");    // Intermédiaire
gradient.addColorStop(0.4,"magenta"); // Intermédiaire
gradient.addColorStop(0.5,"rgb(0,100,255)");    // Intermédiaire
gradient.addColorStop(0.6,"green");    // Intermédiaire
gradient.addColorStop(0.8,"yellow");    // Intermédiaire
gradient.addColorStop(1,"red");    // Arrivée
ctx.fillStyle = gradient;            // Affectation au remplissage
ctx.fillRect(0,0,300,150);
 }

voila maintenant résolu
merci encore

**badaze** · 20/02/2017, 17h22

Cool. Je mets ton script de côté.

le X et Y sur un getimagedata d'un canvas ne me donne pas la bonne couleur

JavaScript

Discussions similaires

Partager

Partager