Unexpected Background Blackening: Transparent Areas Rendered Black

[Muhammad-Sarfaraz]

Unforeseen Background Blackening: Complete Blackness Instead of Transparency After PNG Image Cropping.

Package:

"vue-advanced-cropper": "^2.8.6", 

[Norserium]

@Muhammad-Sarfaraz, do you use toDataURL or toBlob methods to get the cropped result? What mimeType do you use in this case?

[Muhammad-Sarfaraz]

@Muhammad-Sarfaraz, do you use toDataURL or toBlob methods to get the cropped result? What mimeType do you use in this case?

Mime : ".png"

Method: [toDataURL]

 this.$emit("update:modelValue", **result.canvas.toDataURL("image/jpeg"))**;

[Norserium]

That's the reason.

When you pass "image/jpeg" you won't preserve the transparency, you should pass "image/png" or nothing (because "image/png" is the default value).

[Muhammad-Sarfaraz]

That's the reason.

When you pass "image/jpeg" you won't preserve the transparency, you should pass "image/png" or nothing (because "image/png" is the default value).

Ok, That's mean on mime:.png I should use image/png. Will try this, in afternoon.

[Norserium]

@Muhammad-Sarfaraz, any news?

[matthiasPOE]

hi @Norserium currently hit the same issue.

Weirdly enough, i couldnt use the cropper preview due to responsive sizing issues so I just run my own <img :src="previewBase64" />

Which works fine and also shows as transparent. But as soon as I pass the previewBase64 string into the cropper tool I also get the black background even when I use image/png as suggested above.

[Norserium]

But as soon as I pass the previewBase64 string into the cropper tool I also get the black background even when I use image/png as suggested above.

Did you try to change the cropper's background to an another color?

[matthiasPOE]

wow codeblind + end of day is a bad combination haha. Thank you! Appreciated

[Norserium]

@matthiasPOE, you are welcome!