PNG files lose transparency about vue-croppa HOT 8 CLOSED

a better one: https://jsfiddle.net/jdcvpvty/2/

from vue-croppa.

@Tarasovych Yes, you can use canvas-color="white" to make transparent background of png images white

from vue-croppa.

Yes, that was exactly it. I changes the :canvas-color to 'transparent' and now existing PNGs retain their transparency.

The downside of this is that you can no longer see the size of the canvas.

My suggestion is to add the following properties:
:border="true"
:border-color="default"
:border-size="2"

Up to you. I can live with it the way it is now, so just a suggestion.

All around, good work! Most other components that do the same were just way too bulky.

from vue-croppa.

Thank you for your support :))))) It's my first open source project that's actually useful for others lol.

Yes, it was intended that :canvas-color should fill the "white space" of the image. If you'd like it to be transparent and also be able to see the canvas zone, you can add some css styles on .croppa-container. Like this: https://jsfiddle.net/jdcvpvty/1/

Note that the css styles won't have effects on the output image, while :canvas-color will.

from vue-croppa.

Excellent! Thanks!

from vue-croppa.

@zhanziyang I faced this problem today, may I ask if setting canvas-color="white" is good solution for keeping png images transparent background white, but not black (according to the question, default canvas background is black)?
I mean, when I left canvas-color="transparent" and 'image/jpeg' at generateBlob(), I got black background as a result, where there is actually no background because of png format.
When I went canvas-color="white" and kept 'image/jpeg' at generateBlob(), I got white background where it might be transparent.
My backend stores all images in jpeg anyway, so I need white where it's transparent, if png is uploaded. Thank you.

from vue-croppa.

1 1/2 years later I'd just like to say thanks for this!

from vue-croppa.

@nothingismagick :)

from vue-croppa.