गैर-पारदर्शी पिक्सेल सफेद

Question

चालू करने के लिए कैनवास का उपयोग करें मैं छवियों (लोगो, ऐप आइकन इत्यादि) लेने के लिए एक तरीका ढूंढ रहा हूं और जावास्क्रिप्ट/कैनवास का उपयोग करके उन्हें सफेद (पारदर्शिता को छोड़कर) में परिवर्तित कर रहा हूं। http://jsfiddle.net/4ubyj/

Answer 1

कैनवास एपीआई जैसी चीजों के लिए विशेष रूप से संयोजन के तरीकों "केवल पिक्सल कि मूल छवि में स्पष्ट नहीं होते पर आकर्षित।" छवि डेटा के साथ गड़बड़ करने से यह बहुत आसान है।

jsFiddle उदाहरण (inlined छवि के साथ अब)

टोपी टिप @ WilliamVanRensselaer की प्रारंभिक बेला करने के लिए।

आपके द्वारा इच्छित समग्र ऑपरेशन source-in है, जिसका अर्थ है "मैं केवल पेंट करने की कोशिश कर रहे अपारदर्शी हिस्सों को खींचता हूं जहां वे छवि पर अपारदर्शी पिक्सल के शीर्ष पर हैं।"

HTML:

<a href="javascript:doIt()">paint non-transparent regions white</a><br> 
<canvas id="canvas" width="600" height="200"></canvas> 

जावास्क्रिप्ट:

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

imgSrc = "http://d.pr/Td69+"; 
var b = document.getElementsByTagName("body")[0]; 
var i = document.createElement("img"); 
i.src = imgSrc; 
i.style.setProperty("display", "none"); 
i.onload = function() { 
    ctx.drawImage(i, 0, 0); 
} 
b.appendChild(i); 

window.doIt = function() { 
    ctx.globalCompositeOperation = "source-in"; 

    ctx.fillStyle = "#ffffff"; 
    ctx.fillRect(0, 0, 600, 200); 
} 

reference

Answer 2

आपके प्रारंभ करने के लिए कुछ है:

यहाँ मैं अपनी पसंद का (स्थिर छवियों का उपयोग कर, स्पष्ट रूप से) का एक उदाहरण है। अल्फा शून्य नहीं होने पर यह मूल रूप से पिक्सेल को सफेद में बदल देता है, यदि आप चाहते हैं तो आप संशोधन कर सकते हैं।

उदाहरण: http://jsfiddle.net/Q27Qc/

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

// Put something on the canvas (can be an image) 
ctx.font = "100px Arial"; 
ctx.fillText("Google", 20, 130); 

// Get image data for part of the canvas (to see effects) 
var img = ctx.getImageData(20, 40, 80, 100), 
    imgData = img.data; 

// Loops through bytes and change pixel to white if alpha is not zero. 
for (var i = 0; i < imgData.length; i += 4) { 
    if (imgData[i + 3] !== 0) { 
     imgData[i] = 255; 
     imgData[i + 1] = 255; 
     imgData[i + 2] = 255; 
    } 
} 

// Draw the results 
ctx.putImageData(img, 20, 40);