एचटीएमएल 5

Question

में ग्रेस्केल में छवि का रंग बदलें मेरे पास एक पीएनजी छवि है जिसे मैं ग्रे स्केल में परिवर्तित करना चाहता हूं। मैं इसे ग्रेस्केल में परिवर्तित करने में कामयाब रहा, हालांकि यह छवि के पारदर्शी इलाकों के रंग भी बदलता है। छवि के पारदर्शी क्षेत्र को बदलने के बिना मैं अपना रंग कैसे बदल सकता हूं?

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var img = new Image(); 
img.src = 'image.png'; 
ctx.drawImage(img, 0, 0); 

var imageData = ctx.getImageData(0, 0, 420, 420); 
var px = imageData.data; 

var len = px.length; 

for (var i = 0; i < len; i+=4) { 
    var redPx = px[i]; 
    var greenPx = px[i+1]; 
    var bluePx = px[i+2]; 
    var alphaPx = px[i+3]; 

    var greyScale = redPx * .3 + greenPx * .59 + bluePx * .11; 

    px[i] = greyScale; 
    px[i+1] = greyScale; 
    px[i+2] = greyScale; 
    px[i+3] = greyScale; 
} 

ctx.putImageData(imageData, 0, 0); 

Answer 1

अल्फा "रंग नहीं है"। आपको पारदर्शी भाग पारदर्शी छोड़कर इसे कॉपी करना चाहिए। बस लाइन को हटा दें:

px[i+3] = greyScale; 

Answer 2

मैं इस के उद्देश्य के बारे पूरी तरह से यकीन नहीं है, लेकिन जब से सवाल भी टैग है "HTML5" मुझे लगता है यह प्रयोजनों जैसे की तुलना में अलग के लिए आवश्यकता हो सकती है छवि हेरफेर पुस्तकालय। यदि यह किसी प्रकार का कोई छवि संपादक या HTML5 गेम नहीं है, और आपको बस अपनी कुछ छवियों को ग्रेस्केल में कनवर्ट करना होगा उदा। हॉवर पर, आप के रूप में अच्छी सीएसएस का उपयोग कर सकते हैं:

.grayscale { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
} 

अगर वह उपयुक्त नहीं है, यही कारण है कि आप इस

Answer 3

इस प्लगइन करने की जरूरत है (tancolor.js) के बारे में अधिक जानकारी पोस्ट करें समान काम करता है कि आप प्राप्त करना चाहते हैं, आप source code को जांचने का प्रयास कर सकते हैं और चीजों का परीक्षण करने के लिए intractive demo है।