Obtenez de pixels de la couleur de la toile, à la souris

Est-il possible d'obtenir la valeur RVB des pixels sous la souris? Est-il un exemple complet de cette? Voici ce que j'ai à ce jour:

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

Double de stackoverflow.com/questions/1936021/...

InformationsquelleAutor vince83000 | 2011-07-18

136

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

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

Pertinentes JavaScript:

//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 les fonctions utilitaires:

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);
}

Le voir en action sur JSFIDDLE:

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

Wow l'homme. Juste wow. Donc merveilleusement génial.
Cette réponse montre également les coordonnées des pixels sur passage de la souris.
Pouvez-vous s'il vous plaît examiner cette question et voir si il ya une solution pour cela. Je l'apprécie beaucoup 🙂
Votre utilisation de imbriquée offsetParents est un moyen très agréable d'aller à ce sujet. Je n'ai jamais pensé à ce sujet. Mais pourquoi vous n'utilisez pas régulièrement while boucle au lieu d'un if et puis un do...while?
cette réponse m'aide aujourd'hui (1-septembre-2017).donc +1
Merci 🙂

InformationsquelleAutor Wayne Burkett

7

Je sais que c'est une vieille question, mais voici une autre.
J'avais stocker que des données d'image dans un tableau, puis, sur la souris déplacer l'événement sur la toile:
```
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 les données images à chaque fois.

InformationsquelleAutor Caio Vertematti

La fusion de 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 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>

C'est ma solution complète. Ici, j'ai utilisé de la toile et une image, mais si vous avez besoin d'utiliser <map> sur l'image, c'est possible aussi.

InformationsquelleAutor ebragaparah

appel getImageData tous les temps va ralentir le processus ... pour accélérer les choses, je vous recommandons de stocker les données de l'image et ensuite, vous pouvez obtenir pix valeur facilement et rapidement, donc faire quelque chose comme cela pour de meilleures performances

//keep it global
let imgData = false;  //initially no image data we have
//create some function block 
if(imgData === false){   
//fetch once canvas data     
var ctx = canvas.getContext("2d");
imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}
//Prepare your X Y coordinates which you will be fetching from your mouse loc
let x = 100;   //
let y = 100;
//locate index of current pixel
let index = (y * imgData.width + x) * 4;
let red = imgData.data[index];
let green = imgData.data[index+1];
let blue = imgData.data[index+2];
let alpha = imgData.data[index+3];
//Output
console.log('pix x ' + x +' y '+y+ ' index '+index +' COLOR '+red+','+green+','+blue+','+alpha);

InformationsquelleAutor user889030

3

Réponse Rapide

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

Voici une version de @lwburk de rgbToHex fonction qui prend la rgba tableau comme argument.
```
function rgbToHex(rgb){
return '#' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16);
};
```
- Ceci fonctionne uniquement avec les rouge-valeurs au-dessus de 16, par exemple [10, 42, 67, 255] produit #a2a43 qui n'est pas valide / bien formaté hex code de couleur.
InformationsquelleAutor slamborne
2

Vous pouvez essayer la couleur de l'échantillonneur. C'est un moyen facile de choisir une couleur dans une toile. Voir démo.

InformationsquelleAutor emn178

J'ai un très simple exemple de travail de geting de la couleur des pixels de la toile.

Première HTML de base:

<canvas id="myCanvas" width="400" height="250" style="background:red;" onmouseover="echoColor(event)">
</canvas>

Puis JS pour en tirer quelque chose sur la Toile, et pour obtenir la couleur:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(10, 10, 50, 50);
function echoColor(e){
var imgData = ctx.getImageData(e.pageX, e.pageX, 1, 1);
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
console.log(red + " " + green + " " + blue + " " + alpha);  
}

Ici est un exemple de travail, il suffit de regarder la console.

InformationsquelleAutor Damjan Pavlica

0

@Wayne Burkett est réponse est bon. Si vous voulais aussi extraire la valeur alpha pour obtenir une couleur rvba, nous pourrions le faire:
```
var r = p[0], g = p[1], b = p[2], a = p[3] / 255;
var rgba = "rgb(" + r + "," + g + "," + b + "," + a + ")";
```
J'ai divisé la valeur alpha par 255 parce que les données images de l'objet stocke sous la forme d'un entier compris entre 0 et 255, mais la plupart des applications (par exemple, CanvasRenderingContext2D.fillRect()) exigent des couleurs en CSS valide format, où la valeur alpha est comprise entre 0 et 1.

(Rappelez-vous aussi que si vous extraire d'une couleur transparente, puis la ramener sur la toile, il se superpose quelle que soit la couleur est là auparavant. Donc, si vous avez tiré la couleur rgba(0,0,0,0.1) sur le même spot 10 fois, il serait noir.)

InformationsquelleAutor Galen Long

Vous devez vous connecter pour publier un commentaire.

Réponse Rapide