एक छवि में पिक्सल के माध्यम से लूपिंग

Question

मेरा प्रोजेक्ट एक छवि को एक HTML पृष्ठ में कैनवास टैग में इनपुट करना है, और फिर पिक्सेल के पिक्सल और आरजीबीए मानों के माध्यम से लूप करना है। लाल मानों के माध्यम से लूपिंग करते समय, पिक्सेल में हर चौथा मूल्य, मैं पिक्सेल की स्थिति को लॉग करना चाहता हूं जो एक सफेद पिक्सेल का प्रतिनिधित्व करता है। अब, मेरे पास इस ब्लॉग से प्राप्त कुछ कोड के साथ छवि लोड हो रही है, http://www.phpied.com/photo-canvas-tag-flip/।

उसके पास एक और पोस्ट है जिसमें वह कुछ कोड देता है कि पिक्सेल के माध्यम से लूप कैसे करें और जिस जानकारी को मैं लॉग करना चाहता हूं उसे लॉग ऑन करें, लेकिन मुझे यह समझ में नहीं आ रहा है, और मैं बिना कोड के अपने कोड को कॉपी करना चाहता हूं मैं क्या कर रहा हूँ तो क्या कोई भी कृपया उस विधि को समझा सकता है जिसका वह उपयोग कर रहा है या शायद वह मुझे करने के लिए एक और तरीका दिखा रहा है? यह अन्य पोस्ट http://www.phpied.com/pixel-manipulation-in-canvas/ का लिंक है।

Answer 1

यह सीधा है।

कैनवास के लिए सभी पिक्सेल डेटा अनुक्रमिक रूप से एक सरणी में संग्रहीत किए जाते हैं।

पहला पिक्सेल का डेटा सरणी तत्व # 0-3 (लाल = 0/हरा = 1/नीला = 2/अल्फा = 3) पर कब्जा कर लेता है।

दूसरा पिक्सेल का डेटा सरणी तत्व # 4-7 (लाल = 4/हरा = 5/नीला = 6/अल्फा = 7) पर कब्जा करता है।

और इसी तरह ...

आप context.getImageData का उपयोग करके कि पिक्सेल डेटा लोड कर सकते हैं() और सरणी के माध्यम से गणना।

var imgData = context.getImageData(0,0,canvas.width,canvas.height); 
var data = imgData.data; 

// enumerate all pixels 
// each pixel's r,g,b,a datum are stored in separate sequential array elements 

for(var i=0; i<data.length; i+=4) { 
    var red = data[i]; 
    var green = data[i+1]; 
    var blue = data[i+2]; 
    var alpha = data[i+3]; 
} 

आप उन सरणी मानों को भी बदल सकते हैं और फिर सरणी को context.putImageData() का उपयोग कर छवि में वापस सहेज सकते हैं।

// save any altered pixel data back to the context 
// the image will reflect any changes you made 

context.putImageData(imgData, 0, 0); 

छवि तब आपके पिक्सेल सरणी में किए गए परिवर्तनों के अनुसार बदल जाएगी।

Answer 2

मैं आपको मूल्यों के सरणी को छेड़छाड़ करने के बजाय एल्गोरिदम पर ध्यान केंद्रित करने के लिए एक छवि प्रसंस्करण ढांचे का उपयोग करने की सलाह देता हूं। कुछ व्यवस्थाएं:

• fabric.js
• processing.js
• MarvinJ

MarvinJ के मामले में, आप बस पिक्सल के माध्यम से लूप स्तंभ पुनरावृत्ति कर सकते हैं और पंक्ति समन्वय करता है। मैं रंग घटकों तक पहुंचने के लिए getIntComponentX() विधियों का उपयोग करता हूं।

for(var y=0; y<image.getHeight(); y++){ 
    for(var x=0; x<image.getWidth(); x++){ 
     var red = image.getIntComponent0(x,y); 
     var green = image.getIntComponent1(x,y); 
     var blue = image.getIntComponent2(x,y); 
    } 
} 

इसलिए आपको चिंता करने की आवश्यकता नहीं है कि पिक्सेल डेटा का प्रतिनिधित्व कैसे किया जाता है।

// Is white? 
if(red >= 250 && blue >= 250 && green >= 250){ 
    console.log("Pixel at "+x+","+y+" is white"); 
} 

Runnable उदाहरण::

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

 
function imageLoaded(){ 
 
    
 
    var whitePixels=0; 
 
    for(var y=0; y<image.getHeight(); y++){ 
 
    for(var x=0; x<image.getWidth(); x++){ 
 
     var red = image.getIntComponent0(x,y); 
 
     var green = image.getIntComponent1(x,y); 
 
     var blue = image.getIntComponent2(x,y); 
 
     var alpha = image.getAlphaComponent(x,y); 
 
     
 
     // Is white? 
 
     if(red >= 250 && green >= 250 && blue >= 250 && alpha > 0){ 
 
     whitePixels++; 
 
     } 
 
    } 
 
    } 
 
    
 
    image.draw(canvas); 
 
    
 
    document.getElementById("result").innerHTML = "white pixels: "+whitePixels; 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas" width="500" height="344"></canvas> 
 
<div id="result"></div>