getPixel du code HTML de Toile?

Est-il possible de requête HTML Canvas pour obtenir la couleur à un endroit précis?

InformationsquelleAutor Liam | 2009-03-20

160

Il y a une section sur la manipulation de pixels du W3C de la documentation.

Voici un exemple sur la façon d'inverser une image:

//Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

//Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i  ] = 255 - pix[i  ]; //red
    pix[i+1] = 255 - pix[i+1]; //green
    pix[i+2] = 255 - pix[i+2]; //blue
    //i+3 is alpha (the fourth element)
}

//Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

La manipulation de pixels section est maintenant disponible ici : w3.org/TR/2dcontext2/#pixel-manipulation

InformationsquelleAutor Georg Schölly

48

Avez-vous essayé le getImageData méthode ?
```
var data = context.getImageData(x, y, 1, 1).data;
var rgb = [ data[0], data[1], data[2] ];
```
- ne devrait-ce pas le contexte.getImageData() et pas de toile.getImageData()?
- dépend de ce que le var "toile" contient, il pourrait simplement être le contexte d'une toile avec une merde var nom.
- Wow, très élégant! J'ai pensé à la recherche pour le point dans le contexte, mais c'est beaucoup plus intelligent.
- C'est malin, mais si vous allez à l'appel de la méthode getPixel beaucoup, c'est bien le plus rapide pour mettre en cache les données images de l'objet pour l'ensemble de l'image (0,0,largeur,hauteur), puis calculer l'index de l'aide de idx = (y * width + x) * 4 comme Georg réponse. Cependant, n'oubliez pas d'actualiser que l'objet mis en cache à chaque fois que l'image change.
- C'est vrai @Noio, mais ma réponse est spécifique à la question ci-dessus (c'est à dire la couleur d'un pixel).
- Qu'est-ce que Color() constructeur? Qui ne semblent pas exister n'importe où
- C'est très lent si vous avez besoin d'obtenir à chaque pixel de l'image
- en effet, mais c'est pratique si vous avez seulement besoin de la couleur à l'emplacement spécifique (ce qui était la question)
- voulais juste le signaler. Qwerty l'approche est rapide et pratique
InformationsquelleAutor Theo.T

Oui, bien sûr, à condition de disposer de son contexte. Comment obtenir une toile contexte?

var imgData = context.getImageData(0,0,canvas.width,canvas.height);
//{ data: [r,g,b,a,r,g,b,a,r,g,..], ... }

function getPixel(imgData, index) {
  var i = index*4, d = imgData.data;
  return [d[i],d[i+1],d[i+2],d[i+3]] //returns array [R,G,B,A]
}

//AND/OR

function getPixelXY(imgData, x, y) {
  return getPixel(imgData, y*imgData.width+x);
}

Yay!!! Merci il fonctionne très bien et il est waay plus rapide que d'appeler context.getImageData(x, y, 1, 1);
Ouais c'est 10x plus rapide: jsbench

InformationsquelleAutor Qwerty

8

Yup, découvrez getImageData(). Voici un exemple de rupture de captcha avec JavaScript à l'aide de la toile:

http://ejohn.org/blog/ocr-and-neural-nets-in-javascript/

InformationsquelleAutor Annika Backstrom

function GetPixel(x, y)
{
    var p = ctx.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);  
    return 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);
}

ctx doit être définie comme un attribut dans GetPixel si
Nice rgbToHex instruction de retour

InformationsquelleAutor someone

5

Noter que getImageData retourne un instantané. Les Implications sont les suivantes:
- Les modifications ne prennent effet jusqu'à ultérieure putImageData
- getImageData et putImageData les appels sont relativement lente
InformationsquelleAutor Don Park

//Get pixel data 
var imageData = context.getImageData(x, y, width, height);
//color at (x,y) position
var color = [];
color['red'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 0];
color['green'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 1];
color['blue'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 2];
color['alpha'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 3];

InformationsquelleAutor Foreever

Vous pouvez utiliser i << 2.

const data = context.getImageData(x, y, width, height).data;
const pixels = [];

for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
    pixels.push({
        r: data[dx  ],
        g: data[dx+1],
        b: data[dx+2],
        a: data[dx+3]
    });
}

InformationsquelleAutor A-312

0

Si vous voulez extraire la couleur du pixel en passant les coordonnées de pixel dans la fonction, cela viendra dans maniable
```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function detectColor(x,y){
data=ctx.getImageData(x,y,1,1).data;
col={
r:data[0],
g:data[1],
b:data[2]
};
return col;
}
```
x,y sont les coordonnées que vous souhaitez filtrer couleur.
```
var color=detectColor(x,y)
```
La couleur est l'objet, vous obtiendrez la valeur rvb en couleurs.r,la couleur.g,couleur.b.

InformationsquelleAutor MD Rijwan

Pratique de longue lecture pixel oneliner (dessiner pixel ici)

let rp=((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d')) => (x,y)=>Object.values(ctx.getImageData(x, y, 1, 1).data))();

rp(10,20) //rp(x,y) returns: [r,g,b,a] with values 0-255

JS:

let rp=((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d')) => (x,y)=>Object.values(ctx.getImageData(x, y, 1, 1).data))();

let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()

//draw point
pp(50,60,  198,236,247,250) //x,y,  r,g,b,a

//read color
let c = rp(50,60);

console.log(c);

HTML:

<canvas class="myCanvas" width=100 height=100 style="background: black"></canvas>

Première ligne est la première partie où vous pouvez changer la toile sélecteur de s='.myCanvas'. Cette pratique oneliner est bon pour les algorithmes de test ou de faire preuve de concept, mais pour le code de production est préférable d'utiliser d'autres plus claire et plus lisible le code.

InformationsquelleAutor Kamil Kiełczewski

Vous devez vous connecter pour publier un commentaire.