spatie / laravel-medialibrary

Associate files with Eloquent models
https://spatie.be/docs/laravel-medialibrary
MIT License
5.78k stars 1.08k forks source link

Transparent Images (PNG) has black background when converted. #3502

Closed sajilo-anuj closed 6 months ago

sajilo-anuj commented 10 months ago

As title says, when a conversion is made on transparent png image, the converted image has black background.

The new version of the package started having this issue, installed version: 11.0.4 There was an additional issue with Fit::Crop which has been resolved by installing spatie/images: 3.3.3.

$this->addMediaConversion('square-thumb')
    ->fit(Fit::Crop, 100, 100)
    ->keepOriginalImageFormat()
    ->performOnCollections('image');

Original Image: compare-model-3-performance

Converted Image: compare-model-3-performance-square-thumb

sajilo-anuj commented 10 months ago

@timvandijck Any update regarding this fix?

langeuh commented 10 months ago

Having the same problem since v11 Note that this only happens for me when using 'gd' as IMAGE_DRIVER 'imagick' renders the background transparent for the same file.

Don't know if related, but I'm also getting this error for my transparent files:

ErrorException imagecreatefromstring(): gd-png: libpng warning: iCCP: known incorrect sRGB profile vendor/spatie/image/src/Drivers/Gd/GdDriver.php:88 Illuminate\Foundation\Bootstrap\HandleExceptions::handleError vendor/laravel/framework/src/Illuminate/Foundation/Bootstrap/HandleExceptions.php:255 Illuminate\Foundation\Bootstrap\HandleExceptions::Illuminate\Foundation\Bootstrap{closure} [internal] imagecreatefromstring vendor/spatie/image/src/Drivers/Gd/GdDriver.php:88 Spatie\Image\Drivers\Gd\GdDriver::loadFile vendor/spatie/image/src/Image.php:49 Spatie\Image\Image::loadFile...

Versions

php -i | grep 'GD|ImageMagick' GD Support => enabled GD Version => bundled (2.1.0 compatible) Imagick compiled with ImageMagick version => ImageMagick 7.1.0-52 Q16-HDRI x86_64 36d3408b5:20221106 https://imagemagick.org Imagick using ImageMagick library version => ImageMagick 7.1.0-52 Q16-HDRI x86_64 36d3408b5:20221106 https://imagemagick.org ImageMagick copyright => (C) 1999 ImageMagick Studio LLC ImageMagick release date => 2022-11-06

spatie/image: 3.3.4 spatie/laravel-medialibrary: 11.0.5

sajilo-anuj commented 9 months ago

@langeuh So using imagick as Image Driver solves this bug? Been waiting too long. I need this to be working asap. So can you please confirm.

Edit/Update: Yes the 'imagick' driver has no issue with transparent images.

timvandijck commented 9 months ago

This should be fixed in the latest version of the spatie/image package that is used by the medialibrary package.

sajilo-anuj commented 8 months ago

@timvandijck I checked but still I am getting the black background with the latest spatie/image package. I was initially using webp and the result is same. Tried with pngs to, and the result are with black background.

Original image

Converted: image

Package Versions:

image
sajilo-anuj commented 8 months ago

I checked with imagick driver and its working correctly for pngs, but with webp, its the same issue.

timvandijck commented 8 months ago

@anuzpandey5 intresting, would you mind running the test in the spatie/image package?

vendor/bin/pest --filter "works with transparent pngs" 

I'm curious if our differences in results are machine specific or if something else is causing it.

zub0r commented 1 month ago

@timvandijck This is still an issue.

Tested on the above image with "spatie/laravel-medialibrary": "11.9.1", happens for both gd and imagick drivers, (ImageMagick 6.9.11-60, GD library Version: 2.3.3)

zub0r commented 1 month ago

Ok, so for anyone having this issue after migrating from older media-library - it looks like before the white backgound was the default, now you need to explicitly set in in your conversion with $this->addMediaConversion('some-conversion')->background('#ffffff')...

timvandijck commented 1 month ago

Indeed, I believe in hindsight it was not ideal to have this default changed, but reverting it back might again cause problems for people who expect it to be there.

For now passing any color that includes transparency like #ffffff or rgba(0, 0, 0, 0) should do the trick.