HTML कैनवास से getPixel?

Question

किसी विशिष्ट स्थान पर रंग प्राप्त करने के लिए HTML कैनवस ऑब्जेक्ट को क्वेरी करना संभव है?

Answer 1

W3C प्रलेखन में पिक्सेल हेरफेर के बारे में एक अनुभाग है ।

यहाँ एक उदाहरण है कि कैसे एक छवि को पलटना है :

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

Comments

पिक्सेल हेरफेर अनुभाग अब यहां उपलब्ध है: w3.org/TR/2dcontext2/#pixel-manipulation

— jtraulle

Answer 2

आप getImageData विधि की कोशिश की है?

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

Comments

यह संदर्भ नहीं होना चाहिए ।getImageData () और नहीं कैनवास ।getImageData ()?

— Crashalot 7

@Crashalot इस बात पर निर्भर करता है कि var "कैनवस" में क्या है, यह एक क्रैपी के नाम के साथ बस एक कैनवास का संदर्भ हो सकता है।

— tbleckert

वाह, बहुत सुंदर! मैंने पूरे संदर्भ में बिंदु की खोज करने के बारे में सोचा, लेकिन यह बहुत अधिक स्मार्ट है।

— एक

यह चतुर है, लेकिन अगर आप getPixel को बहुत अधिक कहते हैं, तो यह पूरी छवि (0,0, चौड़ाई, ऊंचाई) के लिए ImageData ऑब्जेक्ट को कैश करने के लिए बहुत तेज़ है, और फिर idx = (y * width + x) * 4जॉर्ज के उत्तर की तरह सूचकांक का उपयोग करके गणना करें । हालाँकि, हर बार छवि बदलने पर उस कैश्ड ऑब्जेक्ट को ताज़ा करना न भूलें।

— noio

वह Color()रचनाकार क्या है ? यही कारण है कि कहीं भी मौजूद नहीं लगता है

— fregante

Answer 3

हां, निश्चित रूप से, बशर्ते इसके संदर्भ आपके पास हों। कैनवास संदर्भ कैसे प्राप्त करें?

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

---

पुनश्च: यदि आप डेटा को म्यूट करने और उन्हें वापस कैनवास पर खींचने की योजना बनाते हैं, तो आप उपयोग कर सकते हैं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]
}

आप इसके साथ http://qry.me/xyscope/ पर प्रयोग कर सकते हैं , इसके लिए कोड स्रोत में है, बस इसे कंसोल में कॉपी / पेस्ट करें।

Comments

वाह! धन्यवाद यह बहुत अच्छी तरह से काम करता है और यह कॉल करने की तुलना में तेज़ हैcontext.getImageData(x, y, 1, 1);

— adelriosantiago

यह वास्तव में तेज है। धन्यवाद!

— dmitru

Answer 4

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

Comments

ctx को GetPixel में एक विशेषता के रूप में सेट किया जाना चाहिए

— Marcio

नाइस rgbToHex रिटर्न स्टेटमेंट

— क्वर्टी

Answer 5

हाँ, getImageData () देखें। यहां जावास्क्रिप्ट का उपयोग कैनवास के साथ कैप्चा तोड़ने का एक उदाहरण है:

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

Answer 6

ध्यान दें कि getImageData एक स्नैपशॉट देता है। निहितार्थ हैं:

• बाद में putImageData तक परिवर्तन प्रभावी नहीं होंगे
• getImageData और putImageData कॉल अपेक्षाकृत धीमी हैं

Answer 7

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

Answer 8

आप उपयोग कर सकते हैं 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]
    });
}

Answer 9

लंबे समय से पढ़ा पिक्सेल पिक्सेल ( यहाँ पिक्सेल ड्रा )

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>

पहली पंक्ति प्रारंभिक भाग है जहां आप कैनवास चयनकर्ता को बदल सकते हैं s='.myCanvas'। यह ऑन्लाइनर परीक्षण एल्गोरिदम के लिए अच्छा है या अवधारणा का प्रमाण बनाता है लेकिन अन्य स्पष्ट और पठनीय कोड का उपयोग करने के लिए उत्पादन कोड बेहतर है।

Answer 10

यदि आप फ़ंक्शन में पिक्सेल के निर्देशांक को पास करके पिक्सेल के विशेष रंग निकालना चाहते हैं, तो यह काम में आएगा

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वह समन्वय है जो आप रंग को फ़िल्टर करना चाहते हैं।

var color=detectColor(x,y)

रंग वस्तु है, तो आप द्वारा rgb मूल्य मिल जाएगा color.r, color.g, color.b।