Convert png images to jpg

[sw_double]

Hey guys. Any change I can force size() method to convert png images to jpg?

[JeffS]

That conversion function is not in the PW API (SEE http://processwire.com/apigen/class-ImageSizer.html),  but PW does use GD.  GD has functions that can do this. So you can accomplish what you want.  

See imagecreatefrompng

http://php.net/manual/en/book.image.php

Take a look at this http://stackoverflow.com/questions/1201798/use-php-to-convert-png-to-jpg-with-compression

[horst]

Since February 2013 there were some changes with PW and thirdparty modules. Now you can use PageImageManipulator for this.

[himanshu452001]

PNG to JPG conversion is quite easy and you can do it easily online by PNG to JPG Converter

Edited May 8, 2021 by Macrura
External link removed. Not relevant to this topic, as uses external service.

[tires]

Is there now a solution in Processwire that does not require additional modules?

Unfortunately, this code does not work, although one might assume that it would:

<?=$project->myimg->size(580,580,[ 'quality' => 90, 'format' => 'jpg','cropping' => 'north' ])->url?>

 

[tires]

Is there a simple solution available via the API now? Or do I need to use a plugin?

I just want to convert a PNG to a JPG.

[virtualgadjo]

Hello,
Actually, the question you're asking raises several others on its own.

Is this a systematic conversion of images in a field from PNG or JPG or the ability to select an image and add a conversion feature (essentially creating a variation) for that image in the editing options?

Or perhaps is it a matter of doing this on the client side when displaying an image via a function in the template?

One last possibility: is it simply a formatted text element that would do this in TinyMCE when a PNG image is selected (as in the case of a client’s site that overuses PNGs :))? But be careful—in that case, it will apply to all PNGs in that field.

The number of possibilities might explain why this isn’t a native feature in PW

have a nice day

[tires]

@virtualgadjo
Thank you very much for your reply!
No, I'd like to display an image in my template as usual using `$page->image`, but convert it — regardless of its format — to a JPG.

 

[virtualgadjo]

Hello,

If it's a PNG, it's pretty easy.
In my case, for all my sites, I have a _func.php file in my templates folder that I include in the _init.php file.

include_once(“./_func.php”);

In this file, there are a whole bunch of little custom functions, including this one

function png2jpg($source_path, $quality = 90, $bg_color = [255, 255, 255]) {

    // Not a PNG? keep cool and return the original path as-is
    if (!preg_match('/\.png$/i', $source_path)) {
        return $source_path;
    }

    $dest_path = preg_replace('/\.png$/i', '.jpg', $source_path);

    // If the job has already been done, no need to do it again.
    if(! file_exists($dest_path)) {

        $image = imagecreatefrompng($source_path);

        if (!$image) {
            throw new Exception("Unable to load the PNG");
        }

        $width = imagesx($image);
        $height = imagesy($image);

        $bg = imagecreatetruecolor($width, $height);

        // Configurable background; white by default
        [$r, $g, $b] = $bg_color;
        imagefill($bg, 0, 0, imagecolorallocate($bg, $r, $g, $b));

        // Tell imagecopy to handle alpha correctly
        imagealphablending($bg, true);
        imagecopy($bg, $image, 0, 0, 0, 0, $width, $height);

        imagejpeg($bg, $dest_path, $quality);

        imagedestroy($image);
        imagedestroy($bg);
    }

    return $dest_path;
}

It handles transparency by adding a default background—white in this example, but it can be your page background to maintain a faux transparency effect.
As you can see, if it's not a PNG, it skips it, and—just like when you generate a thumbnail for a gallery for example—it only does the work once.
This way, in the templates, it’s very easy to use it for images like this:

<img src="<?= png2jpg($yourimage->url, 90, ‘_red.jpg’, [240, 0, 0]); ?>" alt="" />

or more simply

<img src="<?= png2jpg($yourimage->url); ?>" alt="" />

In this case, the image will have the default background—white or whatever color you’ve defined in the function
The benefit of the full function is that it can directly generate two images—for example, in the case of a dark/light mode toggle—and, using a class, display the one corresponding to the current mode.
It also adds a small suffix to the image name before “.png” so that the images don't overwrite each other in the folder

I think it wouldn't be too hard to expand it a bit to handle GIFs as well, but I'd be cautious because of the possibility of animated GIFs.

hope it helps 🙂

haves a nice day

 

[tires]

@virtualgadjo

Cool! Thanks a lot!

But does that mean there's no way to do it within ProcessWire itself?

 

[virtualgadjo]

Hello @tires

Actually, ProcessWire doesn't offer this natively, but you could simulate it by using a hook on `page_save` that would automatically handle it for image fields or for the fields you select in the hook—but in that case, `page->image` wouldn't know which one to choose
The other solution would be, as with @horst’s Croppable Image 3 module, to generate a variation of the image, but again, you’d have to choose what to display—the JPG version or the uploaded PNG.
Actually, doing this in a function allows you to treat it as if it were a Processwire function

Perhaps one of the reasons why PW doesn't offer this natively is the difference in syntax depending on the default library chosen—GD or ImageMagick. My function uses GD, so it doesn't depend on that choice; we can be almost certain that GD is included in the host's PHP installation.

have a nice day

[tires]

@virtualgadjo

OK! Thank you!

[virtualgadjo]

@tires my pleasure 🙂
and one little thing I forgot to mention in my previous post: did you know you can disable the upload of PNG files in the image fields? This can be a good way to educate clients and give them a little nudge to put in some effort and work on their images 🙂
That said, when it comes to dark/light mode, my function for simulating transparency is still useful

have a nice day