How to get transparent background on cropped image shape

[kwoeste11]

When I use the code from the demo app to try and support cropping in a ellipse, the background is always black. I have tried setting the FillColor to various things and it is never honored. doesn't matter if I set red, green, #FFFFFF, transparent as the FillColor.

			GetCroppedCanvasOptions getCroppedCanvasOptions = new()
			{
				MaxHeight = maxHeight,
				MaxWidth = maxWidth,
				ImageSmoothingQuality = ImageSmoothingQuality.High.ToEnumString(),
				ImageSmoothingEnabled = true,
				FillColor = "transparent"
			}; 

I am using the JS code as follows. Right out of the demo.

        window.getEllipseImage = (sourceCanvas) => {
            const createdCanvas = document.createElement('canvas');
            const contextCanvas = createdCanvas.getContext('2d');
            const widthCanvas = sourceCanvas.width,
                heightCanvas = sourceCanvas.height;

            createdCanvas.width = widthCanvas;
            createdCanvas.height = heightCanvas;
            contextCanvas.imageSmoothingEnabled = true;

            contextCanvas.drawImage(sourceCanvas, 0, 0, widthCanvas, heightCanvas);
            contextCanvas.globalCompositeOperation = 'destination-in';
            contextCanvas.beginPath();
            contextCanvas.ellipse(widthCanvas / 2, heightCanvas / 2, widthCanvas / 2, heightCanvas / 2, 0 * Math.PI, 0, 180 * Math.PI, true);
            contextCanvas.fill();

            return createdCanvas.toDataURL("image/png", 1);

I have made sure to save the file as a png so transparency is supported. I tried the source as a jpeg and a png as well.

What am I missing ? Has to be something simple as the demo app properly writes the bordering area as transparent.

Thanks for the help !

[MaxymGorn]

Hi @kwoeste11. Sure it's should work. Could you again provide temp solution (repository) with this problem? Now, I'm really have no clue why it isn't working. I go through original solution cropper.js: https://github.com/fengyuanchen/cropperjs/blob/main/docs/examples/crop-a-round-image.html, but we have the same code. Possible problem with viewing images, ain't?

[kwoeste11]

Thanks for the reply. After more digging, it isn't the image coming out of the cropper code that loses the transparency, it is coming out of my resizing code. So nothing with your stuff, something I have to sort out in the resize process.