Asked  9 Months ago    Answers:  5   Viewed   57 times

I've coded a function that crops an image to a given aspect ratio and finally then resizes it and outputs it as JPG:

<?php

function Image($image, $crop = null, $size = null)
{
    $image = ImageCreateFromString(file_get_contents($image));

    if (is_resource($image) === true)
    {
        $x = 0;
        $y = 0;
        $width = imagesx($image);
        $height = imagesy($image);

        /*
        CROP (Aspect Ratio) Section
        */

        if (is_null($crop) === true)
        {
            $crop = array($width, $height);
        }

        else
        {
            $crop = array_filter(explode(':', $crop));

            if (empty($crop) === true)
            {
                $crop = array($width, $height);
            }

            else
            {
                if ((empty($crop[0]) === true) || (is_numeric($crop[0]) === false))
                {
                    $crop[0] = $crop[1];
                }

                else if ((empty($crop[1]) === true) || (is_numeric($crop[1]) === false))
                {
                    $crop[1] = $crop[0];
                }
            }

            $ratio = array
            (
                0 => $width / $height,
                1 => $crop[0] / $crop[1],
            );

            if ($ratio[0] > $ratio[1])
            {
                $width = $height * $ratio[1];
                $x = (imagesx($image) - $width) / 2;
            }

            else if ($ratio[0] < $ratio[1])
            {
                $height = $width / $ratio[1];
                $y = (imagesy($image) - $height) / 2;
            }

            /*
            How can I skip (join) this operation
            with the one in the Resize Section?
            */

            $result = ImageCreateTrueColor($width, $height);

            if (is_resource($result) === true)
            {
                ImageSaveAlpha($result, true);
                ImageAlphaBlending($result, false);
                ImageFill($result, 0, 0, ImageColorAllocateAlpha($result, 255, 255, 255, 127));

                ImageCopyResampled($result, $image, 0, 0, $x, $y, $width, $height, $width, $height);

                $image = $result;
            }
        }

        /*
        Resize Section
        */

        if (is_null($size) === true)
        {
            $size = array(imagesx($image), imagesy($image));
        }

        else
        {
            $size = array_filter(explode('x', $size));

            if (empty($size) === true)
            {
                $size = array(imagesx($image), imagesy($image));
            }

            else
            {
                if ((empty($size[0]) === true) || (is_numeric($size[0]) === false))
                {
                    $size[0] = round($size[1] * imagesx($image) / imagesy($image));
                }

                else if ((empty($size[1]) === true) || (is_numeric($size[1]) === false))
                {
                    $size[1] = round($size[0] * imagesy($image) / imagesx($image));
                }
            }
        }

        $result = ImageCreateTrueColor($size[0], $size[1]);

        if (is_resource($result) === true)
        {
            ImageSaveAlpha($result, true);
            ImageAlphaBlending($result, true);
            ImageFill($result, 0, 0, ImageColorAllocate($result, 255, 255, 255));
            ImageCopyResampled($result, $image, 0, 0, 0, 0, $size[0], $size[1], imagesx($image), imagesy($image));

            header('Content-Type: image/jpeg');

            ImageInterlace($result, true);
            ImageJPEG($result, null, 90);
        }
    }

    return false;
}

?>

The function works as expected but I'm creating a non-required GD image resource, how can I fix it? I've tried joining both calls but I must be doing some miscalculations.

<?php

/*
Usage Examples
*/

Image('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', '1:1', '600x');
Image('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', '2:1', '600x');
Image('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', '2:', '250x300');

?>

Any help is greatly appreciated, thanks.

 Answers

89

You will have to modify your resizing code not to be based on the cropped image to start with. Since you want to do the cropping and resizing in one go you need to calculate it independently.

<?php
function Image($image, $crop = ':', $size = null) {

    $image = ImageCreateFromString(file_get_contents($image));

    if (is_resource($image)) {

        $x = 0;
        $y = 0;
        $width = imagesx($image);
        $height = imagesy($image);

        // CROP (Aspect Ratio) Section
        $crop = array_filter(explode(':', $crop));

        if (empty($crop)) {

            $crop = [$width, $height];

        } else {

            $crop[0] = $crop[0] ?: $crop[1];
            $crop[1] = $crop[1] ?: $crop[0];

        }

        $ratio = [$width / $height, $crop[0] / $crop[1]];

        if ($ratio[0] > $ratio[1]) {

            $width = $height * $ratio[1];
            $x = (imagesx($image) - $width) / 2;

        } else {

            $height = $width / $ratio[1];
            $y = (imagesy($image) - $height) / 2;

        }


        // Resize Section    
        if (is_null($size)) {

            $size = [$width, $height];

        } else {

            $size = array_filter(explode('x', $size));

            if (empty($size)) {

                $size = [imagesx($image), imagesy($image)];

            } else {

                $size[0] = $size[0] ?: round($size[1] * $width / $height);
                $size[1] = $size[1] ?: round($size[0] * $height / $width);

            }
        }

        $result = ImageCreateTrueColor($size[0], $size[1]);

        if (is_resource($result)) {

            ImageSaveAlpha($result, true);
            ImageAlphaBlending($result, true);
            ImageFill($result, 0, 0, ImageColorAllocate($result, 255, 255, 255));
            ImageCopyResampled($result, $image, 0, 0, $x, $y, $size[0], $size[1], $width, $height);

            ImageInterlace($result, true);
            ImageJPEG($result, null, 90);

        }
    }

    return false;
}

header('Content-Type: image/jpeg');
Image('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', '1:1', '600x');

?>
Wednesday, March 31, 2021
 
rblarsen
answered 9 Months ago
49

The solution was the following:

    if ($width/$height > $this->maxWidth/$this->maxHeight) {
      // then resize to the new height...
                $command .= ' -resize "x'.$this->maxHeight.'"';

                // ... and get the middle part of the new image
                // what is the resized width?
                $resized_w = ($this->maxHeight/$height) * $width;

                // crop
                $command .= ' -crop "'.$this->maxWidth.'x'.$this->maxHeight.'+'.round(($resized_w - $this->maxWidth)/2).'+0" +repage';
            } else {
              $command .= ' -resize "' . $this->maxWidth . 'x"';
              $resized_h = ($this->maxWidth/$width) * $height;

                // crop
                $command .= ' -crop "'.$this->maxWidth.'x'.$this->maxHeight.
                             '+0+'.round(($resized_h - $this->maxHeight)/2).'" +repage';
            }
Saturday, May 29, 2021
 
gMale
answered 7 Months ago
47

Skipping pixels will result in aliasing, where high frequency changes (such as alternating light/dark bands) will convert to low frequencies (such as constant light or dark).

The quickest way to downsize to half without aliasing is to average 2x2 pixels into a single pixel. Better results can be had with more sophisticated reduction kernels, but they will come at the expense of speed.

Here are some examples of the techniques discussed so far.

Skipping every other pixel - you can see that the results aren't very good by looking at the legend on the left side. It's almost unreadable:

Skipping every other pixel

Averaging every 2x2 grid - The text is now sharp and readable:

Average 2x2

Gaussian blur, as suggested by R. - a little blurrier, but more readable up to a point. The amount of blur can be adjusted to give different results:

Gaussian blur followed by pixel selection

R. is also correct about the Gamma curve affecting the results, but this should only be visible in the most demanding applications. My examples were done without gamma correction.

Edit: And here is an example of a more sophisticated but slow kernel, a Lanczos-5 performed in a linear (not gamma-adjusted) color space.

Lanczos-5 in linear space

The contrast in the lettering is lower, probably because of the conversion of color spaces. But look at the coastline detail.

Monday, August 9, 2021
 
IQAndreas
answered 4 Months ago
72

Vector drawable is not supported for launcher icons. You are, however, encouraged to use it everywhere else.

Monday, August 9, 2021
 
Dunc
answered 4 Months ago
49

You have tagged this post with createjs and easeljs, but your examples show plain Canvas context usage for scaling.

You can use the scale parameter on Bitmap.cache() to get the result you want, then reuse the cacheCanvas as necessary.

// This will create a half-size cache (50%)
// But scale it back up for you when it displays on the stage
var bmp = new createjs.Bitmap(img);
bmp.cache(0, 0, img.width, img.height, 0.5);

// Pull out the generated cache and use it in a new Bitmap
// This will display at the new scaled size.
var bmp2 = new createjs.Bitmap(bmp.cacheCanvas);

// Un-cache the first one to reset it if you want
bmp.uncache();

Here is a fiddle to see it in action: http://jsfiddle.net/lannymcnie/ofdsyn7g/

Note that caching just uses another canvas with a drawImage to scale it down. I definitely would stay away from toDataURL, as it not performant at all.

Tuesday, November 30, 2021
 
Sendy
answered 1 Day ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share