How to resize image - and keep transparent background

Question

I am using this code to resize images. The resize works just fine, except the image background changes from transparent to black. I would like to maintain the transparent background but haven't found a resource explaining how to do it.

https://jsfiddle.net/skwny/gh7c2mpa/

see fiddle

Please provide a working example of your own code and not just a link to some other page with someone else's code. — jered, Sep 08 '19 at 18:04
I think all you need to do is make it `image/png` and you should be good — joyBlanks, Sep 08 '19 at 18:40

score 4 · Accepted Answer · answered Sep 08 '19 at 18:56

4

For image transparency, you need a proper image format change image/jpeg to image/png

var dataUrl = canvas.toDataURL('image/png');

answered Sep 08 '19 at 18:56

joyBlanks

6,419
1
22
47

1

A little more detail, any extension can be used as long as it's the same as the original file. – skwny Sep 08 '19 at 19:13

How to resize image - and keep transparent background

1 Answers1