एचटीएमएल 5 कैनवास मास्क

Question

के रूप में छवि का उपयोग करें क्या पूरे कैनवास या कैनवास के भीतर छवियों के लिए मुखौटा के रूप में आकार के साथ एक छवि का उपयोग करना संभव है?

मैं छवियों पर एक मुखौटा के साथ एक कैनवास में छवियां रखना चाहता हूं, और फिर इसे एक नई छवि के रूप में सहेजना चाहता हूं।

Answer 1

आप 'स्रोत-इन' ग्लोबल कॉम्पोजिटऑपरेशन का उपयोग करके एक मुखौटा के रूप में एक काले और सफेद छवि का उपयोग कर सकते हैं। सबसे पहले आप अपनी मास्क छवि को कैनवास पर खींचते हैं, फिर आप ग्लोबल कॉम्पोजिटऑपरेशन को 'स्रोत-इन' में बदल देते हैं, अंततः आप अपनी अंतिम छवि खींचते हैं।

आपकी अंतिम छवि केवल खींची जाएगी जहां यह मुखौटा ओवरले करेगा।

var ctx = document.getElementById('c').getContext('2d'); 

ctx.drawImage(YOUR_MASK, 0, 0); 
ctx.globalCompositeOperation = 'source-in'; 
ctx.drawImage(YOUR_IMAGE, 0 , 0); 

More info on global composite operations

Answer 2

पियरे के जवाब के अलावा आप भी एक काले और सफेद छवि अपनी छवि के लिए एक मुखौटा स्रोत के रूप में अपने डेटा को कॉपी करके एक CanvasPixelArray में की तरह उपयोग कर सकते हैं:

var 
dimensions = {width: XXX, height: XXX}, //your dimensions 
imageObj = document.getElementById('#image'), //select image for RGB 
maskObj = document.getElementById('#mask'), //select B/W-mask 
image = imageObj.getImageData(0, 0, dimensions.width, dimensions.height), 
alphaData = maskObj.getImageData(0, 0, dimensions.width, dimensions.height).data; //this is a canvas pixel array 

for (var i = 3, len = image.data.length; i < len; i = i + 4) { 

    image.data[i] = alphaData[i-1]; //copies blue channel of BW mask into A channel of the image 

} 

//displayCtx is the 2d drawing context of your canvas 
displayCtx.putImageData(image, 0, 0, 0, 0, dimensions.width, dimensions.height);