কোনও চিত্র থেকে পিক্সেলের এক্স, ওয়াই সমন্বয় রঙ কীভাবে পাবেন?

Question

কোনও পিএনজি চিত্রের নির্বাচিত (x, y) পয়েন্টটি স্বচ্ছ কিনা তা পরীক্ষা করার কোনও উপায় আছে কি?

Comments

ছবিটি কোনওভাবে কোনও ক্যানভাস উপাদানটিতে লোড করা যায়?

যদি অন্য কোনও উপায় না থাকে, তবে

— ড্যানি ফক্স

Answer 1

জেফের উত্তরের ভিত্তিতে আপনার প্রথম পদক্ষেপটি আপনার পিএনজির একটি ক্যানভাস উপস্থাপনা তৈরি করা হবে। নিম্নলিখিতটি একটি অফ-স্ক্রিন ক্যানভাস তৈরি করে যা আপনার চিত্রের সমান প্রস্থ এবং উচ্চতা এবং এতে চিত্রটি আঁকা।

var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

এর পরে, যখন কোনও ব্যবহারকারী ক্লিক করেন, ব্যবহার করুন event.offsetXএবং event.offsetYঅবস্থানটি পেতে। এটি তখন পিক্সেল অর্জন করতে ব্যবহার করা যেতে পারে:

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

আপনি কেবল একটি পিক্সেল দখল করছেন বলে, পিক্সেলডেটা পিক্সেলের আর, জি, বি, এবং মানগুলি সহ একটি চারটি প্রবেশ অ্যারে। আলফার জন্য, 255 এর চেয়ে কম যে কোনও কিছু সম্পূর্ণ স্বচ্ছ হওয়ার সাথে কিছুটা স্বচ্ছতার প্রতিনিধিত্ব করে।

এখানে একটি jsFizz উদাহরণ: http://jsfiddle.net/thirtydot/9SEMf/869/ আমি এই সমস্ত সুবিধার্থে jQuery ব্যবহার করেছি, তবে এটি কোনওভাবেই প্রয়োজন হয় না।

দ্রষ্টব্য: getImageData ডেটা ফাঁস রোধ করতে ব্রাউজারের একই-উত্স নীতিটির অধীনে পড়ে, এর অর্থ এই কৌশলটি ব্যর্থ হবে যদি আপনি অন্য ডোমেন থেকে কোনও চিত্র দিয়ে ক্যানভাসটি নোংরা করেন বা (আমার বিশ্বাস, তবে কিছু ব্রাউজারগুলি এর সমাধান করতে পারে) কোনও ডোমেন থেকে এসভিজি। এটি কোনও ক্ষেত্রে লগ ইন হওয়া ব্যবহারকারীর জন্য কোনও কাস্টম চিত্রের সম্পদ সরবরাহ করে এমন ঘটনাগুলির বিরুদ্ধে সুরক্ষা দেয় এবং আক্রমণকারী তথ্য পেতে ছবিটি পড়তে চায় to আপনি একই সার্ভার থেকে চিত্রটি পরিবেশন করে বা ক্রস-অরিজিন রিসোর্স ভাগ করে নেওয়ার মাধ্যমে সমস্যাটি সমাধান করতে পারেন ।

Comments

গম্ভীর - দুর্দান্ত কাজ। আমি জানতাম আমার এইরকম একটি ঝাঁকুনি তৈরি করা উচিত তবে খুব চর্বিযুক্ত এবং অলস ছিল। আপনি এটি এখানে হত্যা করেছেন

— জেফ এসকালান্ট

এটি সঠিক হওয়ার জন্য, আপনাকে ক্যানভাসের স্থানাঙ্ক স্থান নির্ধারণ করতে হবে অর্থাৎ চিত্রের মাত্রাগুলির সাথে মিল রেখে প্রস্থ এবং উচ্চতা নির্ধারণ করতে হবে। সিএসএস প্রস্থ এবং উচ্চতা কেবলমাত্র বিন্যাসের জন্য চূড়ান্ত ক্যানভাস প্রসারিত করতে পারে, এটি যখন কোনও পূর্বনির্ধারিত উপাদান থাকে তখন সহায়তা করে না। Something ('<ক্যানভাস প্রস্থ =' + img.width + 'উচ্চতা =' + img.height + '/>') এর মতো কিছু চেষ্টা করুন। অথবা এটি কোনওভাবে অফ-স্ক্রিন ক্যানভ্যাসগুলির সাথে প্রযোজ্য নয়?

— ফাবস্প্রো

@ ফ্যাবস্প্রো: এটি একটি দুর্দান্ত বিষয়। যেহেতু চিত্রের ডেটা অঙ্কন এবং পঠন প্রসঙ্গের মাধ্যমে করা হয়, প্রস্থ এবং উচ্চতার মানগুলি অর্থহীন। তাদের কোনও খারাপ প্রভাব নেই কারণ ক্যানভাসটি প্রসঙ্গটি সংযুক্ত নয় এবং কারণটি আমি আমার ডেমোতে এই প্রভাবটি দেখিনি কারণ এটি চিত্রটি প্রসঙ্গে প্রারম্ভিক প্রস্থ / উচ্চতার চেয়ে ছোট is আমি ততক্ষণে আপডেট করব, যদিও এটি অ্যাক্সেসে নিরাপদ .widthএবং .heightক্যানভাসে নিজেই কনটেন্টেশনের মাধ্যমে নয়।

— ব্রায়ান নিকেল

ফায়ারফক্স jsfiddle.net/9SEMf/622 এর জন্য এটি ঠিক করুন এই ব্যবহার stackoverflow.com/questions/11334452/event-offsetx-in-firefox

— Benoît

আপনি এটি দূরবর্তী চিত্রগুলির জন্য ব্যবহার করতে পারবেন না। "ক্যানভাস থেকে চিত্রের ডেটা পেতে অক্ষম কারণ ক্যানভাসটি ক্রস-অরিজিন ডেটা দ্বারা কলঙ্কিত হয়েছে Security সিকিউরিটি ইরর: ব্যবহারকারী এজেন্টের সুরক্ষা নীতি ভেঙে দেওয়ার চেষ্টা করা হয়েছিল।"

— কার্ল গ্লেজার

Answer 2

কানাভাস এটি করার এক দুর্দান্ত উপায় হবে, যেমন উপরে উপরে বলা হয়েছে @ পিএসটি একটি উত্তম উদাহরণের জন্য এই উত্তরটি দেখুন:

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

কিছু কোড যা আপনাকে বিশেষভাবে পরিবেশন করবে:

var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
  console.log pix[i+3]
}

এটি সারি সারি চলে যাবে, সুতরাং আপনাকে এটিকে x, y এ রূপান্তর করতে হবে এবং হয় লুপের জন্য সরাসরি চেকে রূপান্তর করতে হবে বা একটি শর্তাধীন ভিতরে চালানো উচিত।

আপনার প্রশ্নটি আবার পড়ে, দেখে মনে হচ্ছে আপনি ব্যক্তি যে পয়েন্টটি ক্লিক করেছেন সেই পয়েন্টটি পেতে সক্ষম হবেন। এটি জ্যাকুরির ক্লিক ইভেন্টের সাহায্যে খুব সহজেই করা যায়। উপরের কোডটি কেবল একটি ক্লিক হ্যান্ডলারের ভিতরে চালিত করুন:

$('el').click(function(e){
   console.log(e.clientX, e.clientY)
}

এগুলিকে আপনার এক্স এবং ওয়াইয়ের মানগুলি ধরা উচিত।

Comments

মন্তব্যকারী এটি জিজ্ঞাসা করলেন না (আপাতদৃষ্টিতে) এবং প্রশ্নের উত্তর একেবারেই দেয় না। গৃহীত উত্তর কাজ করে। আমি এই উত্তরটি মুছে ফেলার প্রস্তাব দিচ্ছি ...

— আগামেমনস

Answer 3

পূর্ববর্তী দুটি উত্তর ক্যানভাস এবং ইমেজডেটা কীভাবে ব্যবহার করবেন তা প্রদর্শন করে। আমি চলমান উদাহরণ এবং একটি চিত্র প্রক্রিয়াকরণ কাঠামো ব্যবহার করে একটি উত্তর প্রস্তাব করতে চাই, যাতে আপনাকে পিক্সেল ডেটা ম্যানুয়ালি হ্যান্ডেল করার প্রয়োজন হবে না।

মারভিনভিনজে মেথড ইমেজ.জেটএল্ফা কম্পোনেন্ট (এক্স, ওয়াই) সরবরাহ করে যা কেবল পিক্সেলের জন্য এক্স, ওয়াই স্থানাঙ্কিতে স্বচ্ছতার মান দেয়। যদি এই মান 0 হয়, পিক্সেল সম্পূর্ণ স্বচ্ছ, 1 থেকে 254 এর মধ্যে মানগুলি স্বচ্ছতার স্তর, অবশেষে 255 অস্বচ্ছ।

প্রদর্শনের জন্য আমি নীচের চিত্রটি ব্যবহার করেছি (300x300) স্বচ্ছ ব্যাকগ্রাউন্ড এবং দুটি পিক্সেল স্থানাঙ্কে (0,0) এবং (150,150) ।

কনসোল আউটপুট:

(0,0):
ট্রান্সপারেন্ট (150,150): NOT_TRANSPARENT

image = new MarvinImage();
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded);

function imageLoaded(){
  console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
  console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>

Answer 4

সঙ্গে : 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) {
    if (data[dx+3] <= 8)
        console.log("transparent x= " + i);
}