Fill uploaded images empty space with white

[Matthias]

Hi there, hopefully i didn't miss something, but i have the following question: I want to show a square picture after upload, independent of the original aspect ratio of the uploaded image. But instead of cutting the parts of the original image, it should be filled up the empty spaces with white, so that in any case the full content of the uploaded original is visible.

When i use something like
 

$square = $page->original_uploaded_image->size(500,500); 

The image will just be cropped. Did i miss something, are there options or any ideas how to ensure that all content will be still visible?

Thanks
 

[flydev]

You could use $imageobject->width and $imageobject->height

So you will use it like that :

$square = $page->original_uploaded_image; 
echo ($square->width >= $square->height) ? '<img src="' . $square->width(500)->url . '" />'; : '<img src="' . $square->height(500)->url . '" />';

[Matthias]

Thank you very much, but i fear the new build image won't be a square then, but just keeping the original aspect ratio.

[flydev]

lets ping @horst

[szabesz]

As far as I know, the ProcessWire API can either resize, crop or do both of these operations but it cannot pad an image.

Are you looking for something like this:

http://www.imagemagick.org/Usage/crop/#extent

[horst]

There are two possible options to fit / contain images into a predefined rectangle / square:

With the bare core options, you need to pass your width / height and an additonal setting for cropping = false. (the distribution default is true!)

$containedImage = $page->original_uploaded_image->size(500, 500, array("cropping" => false)); 

 

If you find this to abstract or clumpsy, you may use the beautyful Pia, which reduces this to

$containedImage = $page->original_uploaded_image->contain("square=500");

 

Optionally / additionally interesting in this regard maybe the weighten option of Pia here.

------

But both options only help in rendering images that fit into your defined boundaries. They will work with appropriate markup and css styles applied to them, but they do not apply a canvas to the image files. If you really want to increase the images filesizes for that, by adding pixels and not use css styles, you can use the ImageManipulators canvas method. It does exactly that.

When using the Imagemanipulator with a recent PW version, please pay attention to use $image->pim2load()->...! the API examples all show the method for PW version prior to 2.6

------

Examples with Pia and IM:

$square = $page->original_uploaded_image->contain("square=500, quality=100")->pim2load("squarecanvas")->canvas(500, 500, array(255,255,255))->pimSave();

// or
$bgColor = array(255,255,255);
$suffix = "squarecanvas";
$innerSize = 480;
$outersize = 500;
$square = $page->original_uploaded_image->contain("square=$innerSize, quality=100")->pim2load($suffix)->canvas($outersize, $outersize, $bgColor)->pimSave();

// or
$bgColor = array(255,255,255);
$suffix = "squarecanvas";
$oneSizeFitsAll = 500;
$square = $page->original_uploaded_image->contain("square=$oneSizeFitsAll, weighten=1, quality=100")->pim2load($suffix)->canvas($oneSizeFitsAll, $oneSizeFitsAll, $bgColor)->pimSave();