advanced-cropper
Unexpected Background Blackening: Transparent Areas Rendered Black
Unforeseen Background Blackening: Complete Blackness Instead of Transparency After PNG Image Cropping.
Package:
"vue-advanced-cropper": "^2.8.6",
@Muhammad-Sarfaraz, do you use toDataURL or toBlob methods to get the cropped result? What mimeType do you use in this case?
@Muhammad-Sarfaraz, do you use
toDataURLortoBlobmethods to get the cropped result? WhatmimeTypedo you use in this case?
Mime : ".png"
Method: [toDataURL]
this.$emit("update:modelValue", **result.canvas.toDataURL("image/jpeg"))**;
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).
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.
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.
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?
wow codeblind + end of day is a bad combination haha. Thank you! Appreciated