एचटीएमएल 5 कैनवास छवि कैशिंग/putImageData प्रश्न

Question

मैं एक छवि के एक उदाहरण को लोड करने के लिए एचटीएमएल 5 कैनवास का उपयोग कर रहा हूं जिसे मैं एक बार कैनवास पर कई बार ब्लाइट करता हूं। इसे अनुकूलित करने के लिए छवि को कुछ मामूली पिक्सेल-आधारित हेरफेर की आवश्यकता है। हमले की मेरी प्रारंभिक योजना छवि को लोड करना था, इसे बैकिंग कैनवास में फिसलना था, इसके शीर्ष पर मेरे संशोधनों को आकर्षित करना था, और फिर छवि डेटा को पकड़ना और भविष्य के उपयोग के लिए इसे कैश करना था।

context.drawImage(img, 0, 0); 
context.fillStyle = '#ffffff'; 
context.fillRect(0, 0, 2, 2); // Draw a 2x2 rectangle of white pixels on the top left of the image 

imageData = context.getImageData(0, 0, img.width, img.height); 
cusomImage = imageData; 

हालांकि यह काम करता है, मैंने देखा है कि मेरी छवि (जो एक पारदर्शी PNG है) पारदर्शिता बनाए रखने नहीं करता है:

यहाँ कुछ कोड मैं उस प्रभाव के लिए लिखा गया है। इसके बजाए, putImageData को अपने सामने वाले कैनवास पर रखने के लिए, इसे काले रंग की पृष्ठभूमि के साथ प्रस्तुत किया जाता है। मैं पारदर्शिता कैसे बनाए रखूं?

कोई सुझाव स्वागत है!

Answer 1

putImageData(): के साथ यह पारदर्शी पहले बनाओ http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData() प्रत्यक्ष ओवरराइड कैनवास के पिक्सेल। तो यदि आप एक ही कैनवास पर कुछ और खींचते हैं तो यह "ओवर" नहीं खींचागा, बल्कि इसके क्षेत्र में कैनवास के पिक्सेल को इसके पिक्सेल के साथ बदल देगा।

मैं इस सटीक मुद्दे में भाग गया और आखिरकार क्यों पता चला।

एक समाधान के रूप में, मैं अभी तक इस प्रयास नहीं किया है लेकिन यह वादा लगता है: Why is putImageData so slow?

[संपादित करें]: मैं इस विधि का परीक्षण किया और यह मेरे लिए ठीक काम करता है, अपने डेटा अब पारदर्शिता प्रदर्शित कर रहा है सही ढंग से।

Answer 2

कैनवास बनने के बाद काला है। क्या आप पहली बार उम्मीद कर सकते हैं ऐसा नहीं करता है

context.fillStyle = 'rgba(0,0,0,0)'; 
context.fillRect(0, 0, width, height);