आप किसी छवि से बस पिक्सेल डेटा की सरणी कैसे प्राप्त करते हैं?

उत्तर देने के लिए सभी को धन्यवाद। मुझे अपने प्रश्न के साथ और अधिक विशिष्ट होना चाहिए था। मैंने कई उदाहरण देखे, लेकिन यहां डब्ल्यू 3 स्कूलों में से एक है (धन्यवाद @ पॉइंटी यह इंगित करने के लिए कि यह एक स्रोत नहीं है जिस पर भरोसा करना चाहिए - कोई इरादा नहीं है)।आप किसी छवि से बस पिक्सेल डेटा की सरणी कैसे प्राप्त करते हैं?

http://www.w3schools.com/tags/canvas_getimagedata.asp

<!DOCTYPE html> 
<html> 
<body> 

    <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"> 

    <canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;"> 
    Your browser does not support the HTML5 canvas tag. 
    </canvas> 

    <script> 
    document.getElementById("scream").onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img, 0, 0); 
    var imgData = ctx.getImageData(0, 0, c.width, c.height); 
    // invert colors 
    for (var i = 0; i < imgData.data.length; i += 4) { 
     imgData.data[i] = 255 - imgData.data[i]; 
     imgData.data[i + 1] = 255 - imgData.data[i + 1]; 
     imgData.data[i + 2] = 255 - imgData.data[i + 2]; 
     imgData.data[i + 3] = 255; 
    } 
    ctx.putImageData(imgData, 0, 0); 
}; 
    </script> 

</body> 
</html>

सबसे पहले मैं डब्ल्यू 3 स्कूलों वेबसाइट पर उदाहरण के बाद से उलझन में थोड़ा पता चलता चित्र का पिक्सेल रंग उल्टे जा रहा हूँ, लेकिन जब मैं उदात्त पाठ 2 में कोड को कॉपी करें, बचाने के इसे, और क्रोम में खोलें, छवि के पिक्सेल रंग उलटा नहीं हो जाते हैं और छवि बस इसके ठीक उसी तरह दिखाई देती है।

मेरा मुख्य प्रश्न यह है कि मैं छवि के लिए पिक्सेल डेटा की पूरी सरणी दिखाने के लिए इस कोड में एक पंक्ति कैसे जोड़ सकता हूं?

मैं छवि के नीचे "डाटा" की एक आईडी के साथ एक खाली div जोड़ा गया है और निम्नलिखित कोड लेकिन पिक्सेल डेटा के पूरे सरणी प्रकट नहीं किया था कहा:

document.getElementById("data").innerHTML=imgData.data;

मैं भी कम से कम देखने के लिए करने की कोशिश की अनुवर्ती जोड़कर पिक्सेल डेटा सरणी की लंबाई, लेकिन यह काम नहीं किया:

document.getElementById("data").innerHTML=imgData.data.length;

मैं विभिन्न स्रोतों से छवि पिक्सेल डेटा जोड़ तोड़ के कुछ उदाहरण को देखा और कई बार प्रयास किया है पूरे सरणी प्राप्त करने के लिए पिक्सेल डेटा का लेकिन सक्षम नहीं था।

मैं चित्र में वर्णों या इमेजरी को पहचानने के लिए पिक्सेल डेटा की सरणी देखना चाहता हूं और छवियों में विशिष्ट चीज़ों से उभरने वाले पैटर्न देखना शुरू कर सकता हूं।

आपकी मदद के लिए बहुत बहुत धन्यवाद।

स्रोत

2012-12-20 Jackmc1047

आप https://github.com/Ralt/xpmjs – technosaurus

देख सकते हैं यदि आप पहले से ही 'getImageData() 'के बारे में जानते हैं, तो भ्रम वास्तव में क्या है? – Pointy

@ पॉइंटी मुझे लगता है कि भ्रम का कारण है 'मैंने डब्ल्यू 3 स्कूल' – MikeM

यह ठीक होना चाहिए कि तुम क्या जरूरत है:

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

नीचे एक पिक्सेल RGBA विवरण के लिए उपयोग करने के लिए है:

imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight); // get the image array 

//below is how to access to your pixel details 
red=imgData.data[0]; 
green=imgData.data[1]; 
blue=imgData.data[2]; 
alpha=imgData.data[3];

संपादित करें: आपकी संपादित सवाल का जवाब है:

document.getElementById("data").innerHTML=imgData.data.toString();

या आप सरणी पर पुनरावृति और नीचे की तरह एक तत्व हर बार मुद्रित करने के लिए एक पाश का उपयोग कर सकते हैं:

for(i=0 ; i< imgData.data.length ; i++){ 
    document.getElementById("data").innerHTML += imgData.data[i]; 
}

मुझे आशा है कि इस मदद करता है।

स्रोत

2012-12-20 00:20:51

@ user1917303 क्या आपकी समस्या का समाधान हुआ? –

@ मेहदी करामोस्ली जवाब देने के लिए धन्यवाद। मुझे अपने प्रश्न के साथ और अधिक विशिष्ट होना चाहिए था। मैंने इसे ऊपर स्पष्ट किया।मैंने पूरे पिक्सेल सरणी को प्राप्त करने के लिए आपके द्वारा प्रदान किए गए उदाहरणों को संशोधित करने का प्रयास किया है लेकिन वह सक्षम नहीं था। मेरी समस्या अब ऊपर स्पष्ट रूप से समझाया गया है। मदद के लिए एक बार फिर से धन्यवाद। – Jackmc1047

@ Jackmc1047 फिर से मेरे संपादन की जांच करें, अगर यह आपकी समस्या का समाधान करता है तो कृपया इसे हल के रूप में चिह्नित करें। –

आप किसी छवि से बस पिक्सेल डेटा की सरणी कैसे प्राप्त करते हैं?

उत्तर

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