एचटीएमएल कैनवास

Question

में अद्वितीय रंगों की सूची बनाएं क्या एचटीएमएल कैनवास में वर्तमान में खींचे जाने वाले रंगों की सूची प्राप्त करने का कोई प्रभावी तरीका है?

मुझे लगता है कि सही शब्द वर्तमान समग्र

Answer 1

का एक रंग पैलेट होगा मान लें आप की तरह एक HTML दस्तावेज है निम्नलिखित:

<canvas id="example" width="500" height="300"></canvas> 
<ul id="list"> 
    <h3>Click the canvas to extract colors</h3> 
</ul> 

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

Here's the fiddle

समारोह रंग निकालता है कि एक सूचियों उन्हें है निम्नलिखित, मैं सभी कैनवास ड्राइंग सामान को कॉपी के बाद से यह सिर्फ उदाहरण के रूप में कार्य करता है और काफी साधारण नहीं है परहेज कर रहा हूँ।

var colorList = []; //This will hold all our colors 
function getColors(){ 
     var canvas  = document.getElementById('example'); 
     var context  = canvas.getContext('2d'); 
     var imageWidth = canvas.width; 
     var imageHeight = canvas.height; 
     var imageData = context.getImageData(0, 0, imageWidth, imageHeight); 
     var data  = imageData.data; 

     // quickly iterate over all pixels 
     for(var i = 0, n = data.length; i < n; i += 4) { 
      var r = data[i]; 
      var g = data[i + 1]; 
      var b = data[i + 2]; 
      //If you need the alpha value it's data[i + 3] 
      var hex = rgb2hex("rgb("+r+","+g+","+b+")"); 
      if ($.inArray(hex, colorList) == -1){ 
       $('#list').append("<li>"+hex+"</li>"); 
       colorList.push(hex); 
      } 
     }  
} 

यह स मान है कि वे किस क्रम में अपनी छवि में दिखाई देते हैं (इसलिए 'प्रतीत होता है'), यदि आप एक रंग पिकर चाहते लेकिन आप कर सकते हैं प्रतिनिधित्व करते हैं की एक मालूम होता है बिना क्रम वाली सूची से युक्त एक परिणाम का उत्पादन करेगा colorList.sort(); के उपयोग पर विचार करें जो सरणी को काले-से-सफेद फैशन में ऑर्डर करेगा।

ध्यान दें कि मैं rgb2hex समारोह का उपयोग कर रहा मूल्यों कन्वर्ट करने के लिए, हेक्स प्रारूप मैं अपने चाहने संभालने कर रहा हूँ के लिए लौट आए, तो तुम ठीक rgb इसका इस्तेमाल नहीं करने में संकोच न के साथ कर रहे हैं, समारोह निम्नलिखित है:

function rgb2hex(rgb) { 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
    function hex(x) { 
     return ("0" + parseInt(x).toString(16)).slice(-2); 
    } 
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
} 

और स्रोत this है, जैसा कि मैंने कोड में एक टिप्पणी के रूप में कहा गया है, तो आप आसानी से भी अल्फ़ा चैनल निकालने सकता है अगर आप की जरूरत है, लेकिन मैं सबसे सामान्य परिदृश्य के लिए चला गया (और सरल) है कि मुझे लगता है कि हो सकता है का।