2013-07-22 8 views
17

मेरे पास ब्राउज़र पर एक छवि है।किसी छवि से पिक्सेल रंग प्राप्त करें

मैं छवि रंग के शीर्ष बाएं पिक्सेल (निर्देशांक पर: 0,0) प्राप्त करना चाहता हूं, इससे कोई फर्क नहीं पड़ता कि छवि घुमाया गया है या नहीं।

जावास्क्रिप्ट या PHP कोड का उपयोग करके मैं यह कैसे कर सकता हूं?

+2

संभावित शिकार, कैसे जावास्क्रिप्ट में एक छवि से एक पिक्सेल (एक्स, वाई) प्राप्त करने के लिए: http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-color -of-an-image –

+0

एक PHP समाधान के लिए देखें [php का उपयोग कर छवि से पहला पिक्सेल प्राप्त करें] (http://stackoverflow.com/questions/14178182/get-the-first-pixel-from-the-image- का उपयोग कर-php)। यद्यपि यह आपकी मदद नहीं करेगा यदि आप एक प्रस्तुत पृष्ठ की एक छवि चाहते हैं, न कि एक एम्बेडेड छवि। एक प्रस्तुत पृष्ठ का पिक्सेल रंग प्राप्त करने के लिए [जावास्क्रिप्ट eyedropper (माउस कर्सर के नीचे पिक्सेल के रंग बताएं] पर स्वीकृत उत्तर देखें] (http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of पिक्सेल-अंडर-माउस कर्सर)। – user

+0

संभावित डुप्लिकेट [एक पिक्सेल का एक्स कैसे प्राप्त करें, एक छवि से y समन्वय रंग कैसे प्राप्त करें?] (Https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-xy-coordinate-color-from -an-image) –

उत्तर

34
  • एक कैनवास document.createElement
  • बनाएं जाओ 2 डी संदर्भ canvas.getContext('2d')
  • कैनवास पर चित्र बनाएं context.drawImage(image, x, y)
    • सुनिश्चित करें कि छवि एक ही डोमेन से है या आप पर नहीं पहुंच पाएंगे इसकी पिक्सल
  • छवि context.getImageData(x1, y1, x2, y2)
      के लिए पिक्सेल डेटा प्राप्त करें
    • तुम सिर्फ ऊपरी बाएँ चाहते हैं तो context.getImageData(0, 0, 1, 1)
  • getImageData का परिणाम पिक्सल के एक सरणी यह ​​data क्षेत्र (context.getImageData(0,0,1,1).data)
    • सरणी r, g, b और a मान होगा है में होगा।
+0

नहीं हैं। मुझे लगता है कि आपको बहुत तेज़ उत्तर के लिए इनाम होना चाहिए। यदि मामला HTML5 का समर्थन नहीं करता है तो क्या मामला है। क्या PHP कोड में कोई समाधान है? – Eitan

+2

@Eitan - यदि कैनवास के लिए कोई समर्थन नहीं है तो आपको पिक्सेल डेटा प्राप्त करने के लिए सर्वर साइड कोड का उपयोग करने के लिए सर्वर को (AJAX अनुरोध के साथ) पास करने की आवश्यकता होगी या इसे संभालने के लिए कुछ फ़्लैश/सिल्वरलाइट घृणा का उपयोग करना होगा। –

+2

सावधान रहना एक और बिंदु: DrawImage के साथ प्रस्तुत पिक्सेल मान रंगीन छवि सुधार के कारण आपकी छवि में मानों से भिन्न हो सकते हैं।अच्छी बात यह है कि यह तब होता है जब छवि में रंग स्थान जानकारी होती है। – ironic

12

ब्राउज़र पर एक छवि के लिए आप PHP का उपयोग नहीं कर सकते हैं जब तक कि आप छवि को किसी सर्वर पर पहले स्थानांतरित नहीं कर सकते।

n ब्राउज़र, यदि आप एक canvas में छवि आकर्षित कर सकते हैं आप getImageData() विधि इस्तेमाल कर सकते हैं:

var myImg = new Image(); 
myImg.src = 'image.jpg'; 
var context = document.getElementById('canvas').getContext('2d'); 
context.drawImage(myImg, 0, 0); 
data = context.getImageData(x, y, 1, 1).data; 

आप किसी भी रोटेशन के लिए अनुमति देने के लिए होगा - शायद आप जानते हैं कि रोटेशन लागू किया गया है।

+0

कैनवास आकार को छवि चौड़ाई से अधिक या बराबर होने के लिए सेट किया जाना चाहिए। अन्यथा कैनवास संकल्प के बाहर पिक्सल काले रंग के रूप में आ जाएंगे, भले ही वे –

संबंधित मुद्दे