में पारदर्शी पिक्सेल छवि को कैसे आकर्षित करें मैं आरजीबी पिक्सेल डेटा का उपयोग कर एक छवि खींच रहा हूं। मुझे उस छवि के लिए पारदर्शी पृष्ठभूमि रंग सेट करने की आवश्यकता है। अल्फा के लिए एक पारदर्शी छवि होने के लिए मैं क्या मूल्य निर्धारित कर सकता हूं? या इसके लिए कोई और समाधान है?एचटीएमएल 5 कैनवास
यदि मैं समझता हूं कि आपको क्या चाहिए, तो आप मूल रूप से एक छवि पारदर्शी पर विशिष्ट रंग बदलना चाहते हैं। ऐसा करने के लिए आपको getImageData का उपयोग करने की आवश्यकता है mdn for an explanation on pixel manipulation देखें।
यहाँ कुछ नमूना कोड
var imgd = ctx.getImageData(0, 0, imageWidth, imageHeight),
pix = imgd.data;
for (var i = 0, n = pix.length; i <n; i += 4) {
var r = pix[i],
g = pix[i+1],
b = pix[i+2];
if(g > 150){
// If the green component value is higher than 150
// make the pixel transparent because i+3 is the alpha component
// values 0-255 work, 255 is solid
pix[i + 3] = 0;
}
}
ctx.putImageData(imgd, 0, 0);
आप fuschia के लिए जांच कर सकता है इसके बाद के संस्करण कोड के साथ
if(r == 255 && g == 0 && b == 255)
पिक्सेल छवि को चित्रित करने के बाद, मुझे उस छवि को mousemove ईवेंट पर ले जाना होगा। जब मैं उस छवि को ले जाता हूं, तो मैं उस छवि के चारों ओर सफेद आयताकार देख सकता हूं। मुझे इससे बचने की ज़रूरत है। या पिक्सेल आयत के बजाय उस छवि को अकेले स्थानांतरित करने का कोई तरीका है? – Joe
आपको 255,255,255 (सफेद) के आरजीबी वाले पिक्सल को देखने के अलावा उपर्युक्त करना होगा। Jsfiddle को देखो, यह एक अस्थायी कैनवास तत्व बनाता है, और इसके परिणाम निकालता है। यही आपको करने की ज़रूरत होगी। आप पिक्सेल मैनिपुलेशन करेंगे और डेटा को नए कैनवास पर रखने के लिए 'PutImageData' का उपयोग करें, और यह कि आप छवि के बजाय चारों ओर क्या स्थानांतरित करेंगे। – Loktar
अस्थायी कैनवास तत्व पर चित्र खींचने के बाद, मैंने नीचे कोड का उपयोग किया और मेरी समस्या हल हो गई है। आपकी मदद के लिए धन्यवाद। var imgURL = tempCanvas.toDataURL(); var myImage = नई छवि(); myImage.src = imgURL; context.drawImage (myImage, xPos, yPos); – Joe
0 संकेतों का एक अल्फा जो पिक्सेल पूरी तरह पारदर्शी है 255 का अल्फा मान पूरी तरह से अपारदर्शी है जिसका अर्थ है कि इसमें कोई पारदर्शिता नहीं होगी।
यदि आप अपनी छवि के कुछ भागों पूरी तरह से पारदर्शी (0 के एक अल्फा) कर रहे हैं यह कोई बात नहीं क्या आप जब तक आरजीबी मूल्यों के लिए उपयोग 0. के अल्फा का उपयोग के रूप में एक पक्ष टिप्पणी पर कुछ पुराने खिड़कियों कार्यक्रमों है कि मैं ऊपरी बाएं पिक्सेल की तरह एक धारणा बनाने के लिए इस्तेमाल किया है या निचले दाएं पिक्सेल पारदर्शी रंग के रूप में इस्तेमाल किया जाना है। यह तब सभी पिक्सेल के माध्यम से लूप करेगा और अल्फा को 0 पर सेट करेगा जब इसे इस विशिष्ट आरजीबी मान का सामना करना पड़ेगा।
यदि आप 127 का अल्फा उपयोग करते हैं और छवि दूसरी छवि के शीर्ष पर दिखाई देती है तो ऐसा लगता है कि दो छवियां समान रूप से दिखाई दे रही हैं या नीचे की छवि शीर्ष छवि के माध्यम से 50% रंगों का खून बह रहा है।
यदि आप परीक्षण करना चाहते हैं और देखें कि यह पूरी छवि पर लागू होने पर कैसा दिखता है तो अल्फा के लिए एक चर सेट करें।
जब मैं सभी पिक्सल में अल्फा के लिए 0 सेट करता हूं, तो मेरा छवि भाग पूरी तरह से चालू हो जाता है सफेद करने के लिए। – Joe
का उपयोग करके मुझे लगता है कि आप clearRect चाहते कैनवास एम ethod:
http://www.w3schools.com/html5/canvas_clearrect.asp
इस उपद्रव या पिक्सेल हेरफेर के बिना आप पारदर्शी (या किसी अन्य RGBA रंग) के लिए स्पष्ट पिक्सल करने देगा।
संबंधित: http://stackoverflow.com/questions/2916938/how-to-draw-transparent-image-with-html5-canvas-element – Nobita