पिक्सेल का x कैसे प्राप्त करें, y एक छवि से रंग का समन्वय करता है?

124

क्या यह जांचने का कोई तरीका है कि क्या PNG छवि का एक चयनित (x, y) बिंदु पारदर्शी है?

javascript html image-processing

— डैनी फॉक्स
स्रोत

1

क्या किसी तरह कैनवस तत्व पर इमेज लोड की जा सकती है?

अगर कोई और रास्ता नहीं है, तो

— डैनी फॉक्स

199

जेफ के जवाब पर बिल्डिंग, आपका पहला कदम अपने पीएनजी का एक कैनवास प्रतिनिधित्व बनाना होगा। निम्नलिखित एक ऑफ-स्क्रीन कैनवास बनाता है जो आपकी छवि के समान चौड़ाई और ऊंचाई है और उस पर चित्र खींचा गया है।

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;

क्योंकि आप केवल एक पिक्सेल ले रहे हैं, पिक्सेलडाटा एक चार प्रविष्टि सरणी है जिसमें पिक्सेल का R, G, B और A मान हैं। अल्फा के लिए, 255 से कम कुछ भी 0 के पूर्ण स्तर पर पारदर्शी होने के साथ पारदर्शिता के कुछ स्तर का प्रतिनिधित्व करता है।

यहाँ एक jsField उदाहरण है: http://jsfiddle.net/thirtydot/9SEMf/869/ मैंने इस सब में सुविधा के लिए jQuery का उपयोग किया, लेकिन यह किसी भी तरह से आवश्यक नहीं है।

नोट: getImageData डेटा लीक को रोकने के लिए ब्राउज़र की समान-मूल नीति के अंतर्गत आता है, मतलब यह तकनीक विफल हो जाएगी यदि आप किसी अन्य डोमेन से छवि के साथ कैनवास को गंदा करते हैं या (मेरा मानना है, लेकिन कुछ ब्राउज़रों ने इसे हल किया हो सकता है) किसी भी डोमेन से एसवीजी। यह उन मामलों से बचाता है जहां साइट उपयोगकर्ता में लॉग इन के लिए एक कस्टम छवि संपत्ति का कार्य करती है और एक हमलावर जानकारी प्राप्त करने के लिए छवि को पढ़ना चाहता है। आप एक ही सर्वर से छवि की सेवा करके या क्रॉस-मूल संसाधन साझाकरण को लागू करके समस्या को हल कर सकते हैं ।

— ब्रायन निकल
स्रोत

3

बूम - भयानक काम। मुझे पता था कि मुझे इस तरह एक फील करना चाहिए था लेकिन बहुत मोटा और आलसी था। आपने इसे यहां मार दिया

— जेफ एस्क्लांते

इसके लिए सही होने के लिए, आपको कैनवास के समन्वय स्थान को सेट करने की आवश्यकता है अर्थात छवि आयामों से मेल खाने के लिए चौड़ाई और ऊंचाई निर्धारित करें। सीएसएस की चौड़ाई और ऊंचाई केवल लेआउट के लिए अंतिम कैनवास को फैलाने के लिए काम करती है, जो कि एक अनिर्धारित तत्व होने पर मदद नहीं करता है। $ ('<कैनवास की चौड़ाई =' + img.width + 'ऊँचाई =' + img.height + '/>');; या यह किसी तरह ऑफ-स्क्रीन कैनवस के साथ लागू नहीं होता है?

— फ़ैबप्रो

@fabspro: यह एक उत्कृष्ट बिंदु है। चूँकि चित्र डेटा संदर्भ के माध्यम से किया और पढ़ा जाता है, इसलिए चौड़ाई और ऊँचाई मान व्यर्थ है। उनके पास कोई बुरा प्रभाव नहीं है क्योंकि कैनवास संदर्भ के विपरीत नहीं है और इसका कारण यह है कि मैंने अपने डेमो पर इस प्रभाव को नहीं देखा है क्योंकि छवि संदर्भ की प्रारंभिक चौड़ाई / ऊंचाई से छोटी है। मैं तदनुसार अद्यतन करूंगा, हालांकि यह पहुंच के मुकाबले कैनवास पर पहुंचने .widthऔर सुरक्षित होने के लिए सुरक्षित है .height।

— ब्रायन निकल

4

इस stackoverflow.com/questions/11334452/event-offsetx-in-firefox

— benoît

6

आप दूरस्थ छवियों के लिए इसका उपयोग नहीं कर सकते। "कैनवास से छवि डेटा प्राप्त करने में असमर्थ, क्योंकि क्रॉस-ऑरिजनल डेटा द्वारा कैनवास को दागी गई है। SecurityError: उपयोगकर्ता एजेंट की सुरक्षा नीति के माध्यम से तोड़ने का प्रयास किया गया था।"

— कार्ल ग्लेसर

18

कैनवास ऐसा करने का एक शानदार तरीका होगा, जैसा @pst ने ऊपर कहा है। एक अच्छे उदाहरण के लिए इस उत्तर को देखें:

HTML कैनवास से getPixel?

कुछ कोड जो आपको विशेष रूप से प्रदान करेंगे:

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 में परिवर्तित करने की आवश्यकता होगी और या तो लूप के लिए एक सीधी जांच में परिवर्तित करना होगा या एक सशर्त अंदर चलाना होगा।

अपने प्रश्न को फिर से पढ़ना, ऐसा लगता है कि आप उस बिंदु को प्राप्त करने में सक्षम होना चाहते हैं जिस पर व्यक्ति क्लिक करता है। यह jquery के क्लिक इवेंट के साथ बहुत आसानी से किया जा सकता है। बस उपरोक्त कोड को एक क्लिक हैंडलर के अंदर चलाएं जैसे:

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

उन लोगों को आपका x और y मान हड़पने चाहिए।

— जेफ एस्क्लांटे
स्रोत

यह वह नहीं है जो टिप्पणीकार ने पूछा है (प्रतीत होता है), और इस प्रश्न का उत्तर बिल्कुल नहीं देता है। स्वीकृत उत्तर कार्य करता है। मैं इस उत्तर को हटाने की सलाह देता हूं ...

— अगामनेमस

5

पिछले दो उत्तर प्रदर्शित करते हैं कि कैनवस और इमेजडाटा का उपयोग कैसे करें। मैं एक जवाब देने के लिए उदाहरण के साथ रन करने योग्य उदाहरण और एक इमेज प्रोसेसिंग फ्रेमवर्क का उपयोग करना चाहता हूं, इसलिए आपको पिक्सेल डेटा को मैन्युअल रूप से संभालने की आवश्यकता नहीं है।

MarvinJ विधि प्रदान करता है image.getAlphaComponent (x, y) जो केवल x, y कोऑर्डिनेट में पिक्सेल के लिए पारदर्शिता मान देता है। यदि यह मान 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>

स्निपेट का विस्तार करें

— गेब्रियल अम्ब्रोसियो अर्चनाजो
स्रोत

2

साथ में : 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);
}

— A-312
स्रोत