web-dev-qa-db-fra.com

getPixel de HTML Canvas?

Est-il possible d'interroger un objet HTML Canvas pour obtenir la couleur à un emplacement spécifique?

javascripthtmlcanvas
95
Liam

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

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);
153
Georg Schölly

Avez-vous essayé la méthode getImageData?

data = context.getImageData(x, y, 1, 1).data;
color = new Color([data[0], data[1], data[2]]);
47
Theo.T

Oui bien sûr, à condition que vous ayez son contexte. Comment obtenir un contexte de toile?

var imgData = context.getImageData(0,0,canvas.width,canvas.height);
// array [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);
}
8
Qwerty
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);
}
8
someone

Oui, consultez getImageData (). Voici un exemple de rupture de captcha avec JavaScript en utilisant canvas:

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

8
Annika Backstrom

Notez que getImageData renvoie un instantané. Les implications sont:

  • Les modifications ne prendront effet que lors des opérations suivantes
  • les appels à getImageData et putImageData sont relativement lents
5
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];
4
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]
    });
}
0
A-312

Longue ligne-pixel pratique en lecture (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


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);
<canvas class="myCanvas" width=100 height=100 style="background: black"></canvas>

La première ligne est la partie initiale où vous pouvez changer le sélecteur de toile s='.myCanvas'. Cet outil très utile est utile pour les algorithmes de test ou la validation de concept, mais pour le code de production, il est préférable d'utiliser un code plus clair et lisible.

0
Kamil Kiełczewski

Si vous voulez extraire une couleur particulière de pixel en passant les coordonnées de pixel dans la fonction, cela vous sera utile.

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 est la coordonnée que vous souhaitez filtrer par couleur.

var color=detectColor(x,y)

La couleur est l'objet, vous obtiendrez la valeur RGB par color.r, color.g, color.b.

0
MD Rijwan