• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

upload PNG transparent image shows black background

Hmmm, I can duplicate this, which is weird because we're doing everything right, according to all the docs on how to preserve transparency in PNG's.

Not sure what to do. I just tried adding some code that puts a transparent rectangle in ...

Code:
            // Handle image transparency for original image
            if (function_exists('imagealphablending'))
            {
                imagealphablending($img, false);
                imagesavealpha($img, true);
            }

            // Get image size and scale ratio
            $width  = imagesx($img);
            $height = imagesy($img);
            $scale  = min($maxWidth / $width, $maxHeight / $height);

            // If the image is larger than the max shrink it
            if ($scale < 1)
            {
                $new_width  = floor($scale * $width);
                $new_height = floor($scale * $height);

                // Create a new temporary image
                $tmp_img = imagecreatetruecolor($new_width, $new_height);

                if (function_exists('imagealphablending'))
                {
                    $transparent = imagecolorallocatealpha($tmp_img, 255, 255, 255, 127);
                    imagefilledrectangle($tmp_img, 0, 0, $new_width, $new_height, $transparent);
                }

                // Copy and resize old image into new image
                imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
                imagedestroy($img);
                $img = $tmp_img;
            }

... so we're doing absolutely everything possible to preserve transparency. If you Google the subject, that's what everyone says to do ...

-- hugh
 
thank you
I relplace this code
Code:
// Handle image transparency for original image
            if (function_exists('imagealphablending'))
            {
                imagealphablending($img, false);
                imagesavealpha($img, true);
            }
            // Get image size and scale ratio
            $width  = imagesx($img);
            $height = imagesy($img);
            $scale  = min($maxWidth / $width, $maxHeight / $height);

            // If the image is larger than the max shrink it
            if ($scale < 1)
            {
                $new_width  = floor($scale * $width);
                $new_height = floor($scale * $height);

                // Create a new temporary image
                $tmp_img = imagecreatetruecolor($new_width, $new_height);

                // Handle image transparency for resized image
                if (function_exists('imagealphablending'))
                {
                    imagealphablending($tmp_img, false);
                    imagesavealpha($tmp_img, true);
                }
                // Copy and resize old image into new image
                imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
                imagedestroy($img);
                $img = $tmp_img;
            }

with your code , but the problem still exists , I try to upload new transparent png image and result black background.
any other suggestion please ?
 
Yup, I meant I was trying that but it doesn't work.

I have no other ideas. That's the code all the references I can find about preserving PNG transparency when resizing say to use.

If you can find any other suggestions, I'd be happy to try them.

-- hugh
 
It works successfully , Thank you very much for your efforts.
this second commit for my problems today .
thank you
 
I see here in this thread the code was fixed back in 2016. However on my site I'm experiencing this issue of the system adding a black background to the PNG. I have indeed verified that the PNG is transparent. Can anyone help on this?
 
@bludove30:

I can't reproduce. And if I could, then others could too, and there'd be a lot of screaming here...

Does it happen to any and all PNGs at your end, on all sorts of devices and in all browsers? Because
some PNGs behave funnily and can "lose" their transparency. iPhones are famous for displaying certain PNGs with black instead of transparent backgrounds. So are some browsers. Also, Windows is famous for turning transparent backgrounds black when copying & pasting PNGs. And there can be more such culprits outside of Fabrik, which want to be ruled out first, of course.

[EDIT:] See strikethrough... and here below...
 
Last edited:
I can reproduce. Transparent background is getting black or grey as soon as some resizing is involved.
Different servers (XAMPP on Windows localhost, Litespeed Linux), different browsers, ajax fileupload and standard fileupload.

Strage enough it's the same with JCE Pro if I use the resize option during upload, butit's keeping the transparency if resizing later.
So it must be some setting...
 
You can update from GitHub or (as a workaround until a new official Fabrik version) add the changes from the GitHub file manually.
Usually you should not do cherrypicking and create version mixups but I think these 5 lines of code don't have any impact.

As always: backup before.
 
I updated the code but there is no change. My images still have a black background. Am I going to have to re-upload all my images?
 
Sure, unfortunately existing images keep having the black background.
So, you'll need to re-upload them. Or, if it's many but you have them all in one place locally on your computer, batch-resize them with an app, then FTP them onto the web server.
 
Ok. So I tried what you said and there was no change. The thumbnails that were created with the black background persisted and never updated. So I then deleted the thumbnails AND the full size image from the server and then uploaded via FTP. Still everything looks the same and nothing was being updated. Yes I cleared history and cache. I even tried in an incognito window.
 
Just to double-check, I just tried with the Fabrik fileupload element plugin again -- Ajax and including resizing -- and it works perfectly fine after Troester's fix.

So, you must be dealing with something else.

You say you've "updated the code", but we don't know how, which fabrik version you're running, etc. Are you sure you modified the correct file in the correct way? Maybe better do a full Github update?
What's your setting for "If existing image found" in the Fabrik fileupload plugin?
As for local image processing and FTP: can't say other than you've got to make sure that nothing gets altered on the way, obviously.
 
We are in need of some funding.
More details.

Thank you.

Members online

No members online now.
Back
Top