HTML Canvas'tan getPixel?

Rengi belirli bir konumda almak için bir HTML Canvas nesnesini sorgulamak mümkün müdür?

W3C belgelerinde piksel işlemeyle ilgili bir bölüm var .

İşte bir görüntünün nasıl ters çevrileceğine dair bir örnek :

var context = document.getElementById('myCanvas').getContext('2d');

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

GetImageData yöntemini denediniz mi?

var data = context.getImageData(x, y, 1, 1).data;
var rgb = [ data[0], data[1], data[2] ];

Evet, tabii, içeriğine sahipseniz. Tuval bağlamı nasıl elde edilir?

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

Not: Verileri değiştirmeyi ve tekrar tuval üzerine çekmeyi planlıyorsanız,subarray

var
 a = getPixel(idt, 188411), // Array(4) [0, 251, 0, 255]
 b = idt.data.subarray(188411*4, 188411*4 + 4) // Uint8ClampedArray(4) [0, 251, 0, 255]

a[0] = 255 // does nothing
getPixel(idt, 188411), // Array(4) [0, 251, 0, 255]

b[0] = 255 // mutates the original imgData.data
getPixel(idt, 188411), // Array(4) [255, 251, 0, 255]

// or use it in the function
function getPixel(imgData, index) {
  var i = index*4, d = imgData.data;
  return imgData.data.subarray(index, index+4) // returns subarray [R,G,B,A]
}

Bunu http://qry.me/xyscope/ adresinde deneyebilirsiniz , bunun kodu kaynaktadır, sadece konsola kopyalayıp yapıştırın.

function GetPixel(context, x, y)
{
    var p = context.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);
}

Evet, getImageData () öğesine bakın. İşte captcha'yı tuval kullanarak JavaScript ile kırmanın bir örneği:

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

GetImageData'nın bir anlık görüntü döndürdüğünü unutmayın. Çıkarımlar şunlardır:

• Değişiklikler sonraki putImageData'ya kadar geçerli olmayacak
• getImageData ve putImageData çağrıları nispeten yavaştır

// 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];

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

Kullanışlı uzun piksel okuma oneliner ( buraya piksel çizin )

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>

İlk satır, kanvas seçiciyi değiştirebileceğiniz ilk kısımdır s='.myCanvas'. Bu kullanışlı oneliner, test algoritmaları veya kavram kanıtı yapmak için iyidir, ancak üretim kodu için diğer daha net ve okunabilir kodlar kullanmak daha iyidir.

Piksel koordinatlarını işleve aktararak belirli bir piksel rengini çıkarmak istiyorsanız, bu kullanışlı olacaktır.

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, yrengi filtrelemek istediğiniz koordinattır.

var color=detectColor(x,y)

Renk nesnesidir, yanından rgb değeri elde edecek color.r, color.g, color.b.