images with transparent background - produces result with black background

[abannsunny]

I have images I upload with transparent background and after resizing the images have a black background.

Is there anyway to give a fill so that the resulting images wont have black background?

solved this:

https://stackoverflow.com/questions/8977369/drawing-png-to-a-canvas-element-not-showing-transparency?rq=1

NB, if you was to use canvas.toDataURL and you set the mimetype to anything other than say gif or png, the transparent parts of the image will be completely black.

options: Options = {
resize: {
maxHeight: 150,
maxWidth: 200,
type: 'image/png'
},
allowedExtensions: ['jpg', 'jpeg', 'png']
};

setting type to png solves it!

[ribizli]

I draw the image into a resized canvas to read the dataURL out, so more or less this is browser behaviour. If you could research on this, I'll integrate the solution (if any). I'd appreciate it.

…

On Wed, 16 May 2018, 00:30 abannsunny, ***@***.***> wrote: I have images I upload with transparent background and after resizing the images have a black background. Is there anyway to avoid this? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#6>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-LWWv9p5Z5NmhXrzeFByul3fe3gqBtks5ty1b-gaJpZM4UAX1f> .

[ribizli]

Ok, I've checked this issue a bit more, and figured out, that canvas.drawImage supports transparency. To get the dataURL as transparent, you have to set an output format which also supports transparency. The default value is image/jpeg wich doesn't support it.
Set ResizeOptions.type to image/png (or image/gif) and your output will be transparent too.