Obtenir la couleur de pixel de la toile, au passage de la souris

Question

Obtenir la couleur de pixel de la toile, au passage de la souris

Demandé el 18 de Juillet, 2011: Quand la question a-t-elle été
27784 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Est-il possible d'obtenir le pixel de valeur RVB sous la souris? Y at-il un exemple complet de cela? Voici ce que j'ai jusqu'à présent:

 <script>
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = 'Your URL';

  img.onload = function(){
    ctx.drawImage(img,0,0);


  };

  canvas.onmousemove = function(e) {
        var mouseX, mouseY;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;

        $('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]);
  };
}

</script>

Demandé el 18 de Juillet, 2011 par vince83000

Answer 1

4 Réponses

Answer 2

162voto

lwburk Points 29313

Voici un exemple complet et autonome. Tout d'abord, utilisez le code HTML suivant:

 <canvas id="example" width="200" height="60"></canvas>
<div id="status"></div>

Le JavaScript pertinent:

 // set up some sample squares
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0, 0, 50, 50);
context.fillStyle = "rgb(0,0,255)";
context.fillRect(55, 0, 50, 50);

$('#example').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#status').html(coord + "<br>" + hex);
});

Le code ci-dessus suppose la présence de jQuery et des fonctions utilitaires suivantes:

 function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

Voyez-le en action sur JSFIDDLE:

http://jsfiddle.net/DV9Bw/1/

Répondu el 18 de Juillet, 2011 par lwburk (29313 Points )

Answer 3

12voto

Caio Vertematti Points 8

Je sais que c'est une vieille question, mais voici une alternative. Je stockais ces données d'image dans un tableau, puis lors d'un événement de déplacement de la souris sur le canevas:

 var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4
var r = data[index]
var g = data[index + 1]
var b = data[index + 2]
var a = data[index + 3]

Beaucoup plus facile que d'obtenir l'image imageData à chaque fois.

Répondu el 19 de Août, 2014 par Caio Vertematti (8 Points )

Answer 4

7voto

ebragaparah Points 131

En fusionnant diverses références trouvées ici dans StackOverflow (y compris l'article ci-dessus) et dans d'autres sites, je l'ai fait à l'aide de javascript et de JQuery:

 <html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'photo_apple.jpg';
        context.drawImage(img, 0, 0);
    };

    function findPos(obj){
    var current_left = 0, current_top = 0;
    if (obj.offsetParent){
        do{
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        }while(obj = obj.offsetParent);
        return {x: current_left, y: current_top};
    }
    return undefined;
    }

    function rgbToHex(r, g, b){
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
    }

$('#myCanvas').click(function(e){
    var position = findPos(this);
    var x = e.pageX - position.x;
    var y = e.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;
    var canvas = this.getContext('2d');
    var p = canvas.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>

Ceci est ma solution complète. Ici, je n’utilise que du canevas et une image, mais si vous devez utiliser <map> sur l’image, c’est également possible.

Répondu el 10 de Janvier, 2012 par ebragaparah (131 Points )

Answer 5

3voto

slamborne Points 427

Réponse rapide

context.getImageData(x, y, 1, 1).data; renvoie un tableau rgba. par exemple [50, 50, 50, 255]

Voici une version de la fonction rgbToHex de @ lwburk qui prend le tableau rgba en argument.

 function rgbToHex(rgb){
  return '#' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16);
};

Répondu el 15 de Avril, 2014 par slamborne (427 Points )

Obtenir la couleur de pixel de la toile, au passage de la souris

Réponses

Réponse rapide

Questions en vedette

Top Tags

Prograide.com

Powered by:

Obtenir la couleur de pixel de la toile, au passage de la souris

Réponses

Réponse rapide

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: