এইচটিএমএল ক্যানভাস থেকে পাইপিক্সেল?

Question

কোনও নির্দিষ্ট জায়গায় রঙ পেতে কোনও এইচটিএমএল ক্যানভাস অবজেক্টটি জিজ্ঞাসা করা সম্ভব?

Answer 1

ডাব্লু 3 সি ডকুমেন্টেশনে পিক্সেল ম্যানিপুলেশন সম্পর্কে একটি বিভাগ রয়েছে ।

কীভাবে কোনও চিত্রকে উল্টানো যায় তার একটি উদাহরণ এখানে দেওয়া হয়েছে :

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- ম্যানিপুলেশন

— jtraulle

Answer 2

আপনি কি আইমেজডেটা পদ্ধতিটি ব্যবহার করে দেখেছেন?

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

Comments

এটি কনটেক্সট.জিটেমেজডাটা () হওয়া উচিত নয় এবং ক্যানভাস.বিট আইমেজডেটা () নয়?

— ক্র্যাশলোট

@ ক্র্যাশলোট নির্ভর করে যে ভের "ক্যানভাস" কী রয়েছে তার উপর, এটি কেবল ক্রপী ভার নামের ক্যানভাসের প্রসঙ্গ হতে পারে।

— tbleckert

বাহ, খুব মার্জিত! আমি পুরো প্রসঙ্গে পয়েন্টটি অনুসন্ধান করার বিষয়ে ভেবেছিলাম, তবে এটি অনেক বেশি স্মার্ট।

— এক

এই চালাক, কিন্তু আপনি যদি getPixel অনেক কলিং করা চলুন, এটা অনেক দ্রুত পুরো চিত্র (0,0, প্রস্থ, উচ্চতা) জন্য ImageData বস্তুর ক্যাশে, এবং তারপর সূচক ব্যবহার গনা idx = (y * width + x) * 4গেয়র্গ এর উত্তর চাই। তবে প্রতিবার চিত্র বদলে সেই ক্যাশেড অবজেক্টটি রিফ্রেশ করতে ভুলবেন না।

— noio

সেই Color()কনস্ট্রাক্টর কী ? এটি কোথাও উপস্থিত বলে মনে হচ্ছে না

— ফ্রেগ্যান্ট

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

— অ্যাডেলরিওসেন্টিয়াগো

এটা সত্যিই দ্রুত। ধন্যবাদ!

— দিমিত্রু

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

সিটিএক্স যদিও গেটপিক্সলে একটি গুন হিসাবে সেট করা উচিত

— মার্সিও

নিস rgbToHex প্রত্যাবর্তন বিবৃতি

— কোয়ার্টি

Answer 5

হ্যাঁ, getImageData () দেখুন। ক্যানভাস ব্যবহার করে জাভাস্ক্রিপ্টের সাহায্যে ক্যাপচা ভাঙার একটি উদাহরণ এখানে দেওয়া হয়েছে:

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

Answer 6

নোট করুন যে getImageData একটি স্ন্যাপশট ফেরত দেয় প্রভাবগুলি হ'ল:

• পরবর্তী পুজিজডেটা না হওয়া পর্যন্ত পরিবর্তনগুলি কার্যকর হবে না
• 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)

রঙ অবজেক্ট, আপনার দ্বারা আরজিবি মান পাবেন color.r, color.g, color.b।