getImageData के साथ पारदर्शिता खो गई - एचटीएमएल 5 2 डी संदर्भ

Question

मैंने getImageData के साथ एक अजीब समस्या देखी; छवि डेटा प्राप्त होने पर छवि की पारदर्शिता को अनदेखा किया जाता है।

चूंकि किसी भी छवि को canvas पर अपने छवि डेटा प्राप्त करने से पहले तैयार किया जाना चाहिए, मुझे लगता है कि यह canvas के साथ अपारदर्शी होने में समस्या थी। लेकिन मैं गलत था, canvas का प्रयोग drawImage में एक तर्क के रूप में पारदर्शिता बनाए रखता है।

यहां बताया गया है कि मैंने छवि को कैसे लोड किया;

var load_image = function(name, url, holder, callback) { 
    var img = new Image(); 
    img.src = url; 

    img.addEventListener('load', function(e) { 
     var canvas = make_canvas(e.target.width, e.target.height); 
     var ctx = canvas.getContext('2d'); 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(e.target, 0, 0); 

     holder[name] = {canvas: canvas, ctx: ctx}; 

     delete e.target; 

     callback.call(); 
    }, false); 
}; 

callback बस ड्रॉ समारोह है, जो draw_image invokes छवि आकर्षित करने के लिए है।

सामान्य संस्करण;

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) { 
    ctx.drawImage(img.canvas, sx, sy, w, h, dx, dy, w, h); 
}; 

यह बस drawImage के लिए एक तर्क के रूप कैनवास लेता है, और परिणाम के रूप में बनाए रखा पारदर्शिता के साथ इरादा है। Example।

छवि डेटा संस्करण;

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) { 
    var imagedata = img.ctx.getImageData(sx, sy, w, h); 
    ctx.putImageData(imagedata, dx, dy); 
}; 

यह एक सामान्य संस्करण में इस्तेमाल एक के रूप में एक ही कैनवास से आवश्यक आयत की छवि डेटा प्राप्त करता है, और कैनवास मैं करने के लिए आकर्षित करने के लिए चाहते हैं पर छवि डेटा डालता है। मेरा मानना ​​है कि पारदर्शिता बनाए रखा जाना चाहिए, लेकिन ऐसा नहीं है। Example। (यह origin-clean ध्वज की वजह से एक ड्रॉपबॉक्स लिंक है।)

क्या मुझे यह मानने में गलत लगता है कि getImageData के साथ पारदर्शिता बनाए रखा जाना चाहिए? या क्या मैं इसे गलत तरीके से इस्तेमाल कर रहा हूं?

किसी भी तरह से, वास्तव में सराहना की जाएगी।

Answer 1

मुझे विश्वास है कि आपकी समस्या यह है कि putImageData स्रोत और गंतव्य छवि डेटा को मिश्रित करने के लिए composite operation का उपयोग नहीं करता है। इसके बजाय, यह कैनवास में लाल, हरे, नीले, और अल्फा चैनलों का प्रत्यक्ष लेखन कर रहा है। पूरी तरह पारदर्शी पिक्सेल के लिए, इसका मतलब है कि वे आपके द्वारा अपेक्षित रंग में प्रकट हो सकते हैं या नहीं भी हो सकते हैं।

इसके बजाए, आप एक इंटरमीडिएट कैनवास तत्व बना सकते हैं, उस पर आकर्षित कर सकते हैं, और उसके बाद drawImage() का उपयोग उचित वैश्विक कॉम्पोजिटऑपरेशन के साथ अपने लक्षित कैनवास में प्रस्तुत करने के लिए कर सकते हैं। Mask for putImageData with HTML5 canvas? इस मुद्दे पर अधिक विस्तार से चर्चा करता है।

अपडेट: आप यह सत्यापित कर सकते हैं कि आपके द्वारा अपने "टूटे हुए" उदाहरण में जो डेटा लिखा जा रहा है, उसमें वास्तव में ctx.getImageData(230,50,1,1).data कर पारदर्शी डेटा होता है। परिणाम [0,0,0,0] है - यानी एक पूरी तरह से पारदर्शी पिक्सेल।