Extending canvas of images to match given aspect ratio

andersedvardsen · 10-16-2012, 02:58 PM

Hello

I need help locating a program/script/photoshop action (or something in this category) that can change the canvas size of images so that the resolution matches a given aspect ratio. I am making an e-commerce store and all of my product images have a white surrounding background. All my images are of different sizes, orientations and aspect ratios. I want to automatically change the canvas size of my images so that they match the aspect ratio i want – which again will lead to the images fitting perfectly in my e-commerce store.

Example: the aspect ratio i am looking to match is 2,314:1 (my thumbnail on the store which i want to match is 567px wide and 245px high. 567/245 = 2,314).

So if i have an image that is 1000px wide and 350px high the following is what i would want to do:

1. Extend the canvas so that the aspect ratio is 2,314
2. By dividing the image width by the wanted aspect ratio i find the exact hight my image needs to be. The image needs to be higher in this particular scenario (1000/2,314 = 432)
3. Now that i know it needs to be higher i want to extend the canvas and add white background color evenly spread on the top and bottom of the image, making the image 1000px wide and 432px high, with the only difference being white space on the top and the bottom of the image.
4. Save it to folder and start with the next image.

The next image could present a different case where the image is to high, and i need to extend the canvas evenly to the right and to the left. I would like this program/script/action to notice which sides need to be extended to match the given aspect ratio. If impossible i could also process landscape images in one turn and portrait images in one turn.

I am going to do this with over 1000 product images, so i really need a solution.

Check out http://skaugsport.effektivhjemmeside.no to look at some images and the problems with them.

Regards, Anders

patryk · 10-16-2012, 08:16 PM

here you go:
http://www.imagemagick.org/Usage/resize/

if you are dealing with lots of pics ImageMagick is probably a way to go for you.

run something like that for every image(using shell script, shell_exec() from php script or whatever u have):
all decent servers have imagemagick installed so u shouldn't have problems with that

Code:

convert input_pic.jpg -resize 100x100 -size 100x100 xc:white +swap -gravity center -composite output_pic.jpg

it will resize your input_pic.jpg so that it will fit inside 100px x 100px white area and save it as output_pic.jpg

andersedvardsen · 10-17-2012, 08:22 AM

Thanks for answering.

I have come accross imagemagick, but i reallt can not figure out how it works. I have no experience in programming, and i can't find any tutorial for how to install it on Mac os X Mountain Lion. I have read about installing the binary release for Mac os X here: http://www.imagemagick.org/script/bi...ses.php#macosx

I tried following the instructions, but failed (trying to use commands i get the "command not found"-response i Terminal. It is clearly written for people who are used to use the terminal every day.

Can you help me out on how to get it up and working so that i can use its functions? I am not scared of the terminal, i just need something more understandable to follow. Do i need something else installed on my mac first? For instance xCode? Or is the binary download the only thing i need to get it up and running? Where can i find a easy to understand tutorial for setting up imagemagick? Or should i back away from imagemagick since i do not know any programming (Perl, python, C++ etc.)?

Anders

patryk · 10-17-2012, 12:00 PM

actually imagemagick was made for scripting.
Unfortunately I can't help you with macOS. I can however help you with doing what you want to do on server. That's assuming your server runs php, is linux-based, have shell_exec enabled and has imagemagick installed.
If not, then you'll have to look for other solution (or better yet change hosting

)

here's what you want to do:
1)take code below, edit vars (read comments in code) and save it on your server as 'resize.php' at the same level with your directory with pictures.

2)crete new directory for resized pics(make sure server can write to that directory)

you should have something like that:
http://domain.com/resize.php
http://domain.com/original-directory/
http://domain.com/resizec-pics/

3)run script from browser nd let it run untill you'll see pop-up message

with 1000 pics it will take a lot time, but you'll get there.

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload="reload()">
<?php
//configuration

//directory with original imges
$in_dir = 'pics';

//directory for resized images
$out_dir = 'resized';

//target canve's size
$size = '800x800';

//how many pics to process in one run.
//keep it rather low to avoid timeouts
//(it will re-run itself as many times as needed anyways)
$limit = 2;

if(!is_dir($in_dir)){
    die('wrong input directory!</body>');
}
if(!is_dir($out_dir)){
    die('wrong output directory!</body>');
}
if(!file_put_contents($out_dir . '/__writetest', '1')){
    die('can\'t write to output directory. check permissions!</body>');
}else{
    unlink($out_dir . '/__writetest');
}
$files = glob($in_dir . '/*');

$i = 0;
$ii = 0;
while(isset($files[$i])){
    if(preg_match('/.+(png|jpg|jpeg|gif|bmp|pcx)/i', basename($files[$i]))){
        if(!file_exists($out_dir . '/' .  basename($files[$i])) && $ii < $limit){
            $file1 = $files[$i];
            $file2 = $out_dir . '/' .  basename($files[$i]);
            $command = 'convert ' . $file1 . ' -resize ' . $size . ' -size ' . $size . ' xc:white +swap -gravity center -composite ' . $file2;
            shell_exec($command);
            echo 'Resized ' . $files[$i] . ' and saved as ' . $file2 . '<br />';
            $ii++;
        }
    }
    $i++;
}
echo '<br /><br /><noscript>reload to proccess next images</noscript>';

    echo '<script language="javascript">' . "\n";
    echo 'function reload(){' . "\n";
if($ii > 0){
    echo 'window.location = \'' . $_SERVER['PHP_SELF'] . '?rand=' . rand(0, 999999999999) . '\';' . "\n";
}else{
    echo 'alert(\'all pics resized\');' . "\n";
}
    echo '}' . "\n";
    echo '</script>' . "\n";
?>
</body>
</html>

It will resize all images from source directory and save them with the same names in another directory. this way once it's done you'll just have to rename directories

just let it run in browser. it will let you know when it's finished.

andersedvardsen · 10-17-2012, 01:16 PM

Brilliant, thank you so much! This is exactly what i was looking for

Is there a way to make it work with image filenames that include spaces? Like: "my cool image.jpg", or can it only handle "my_cool_image.jpg"?

I tried with spaces, resulting in the process reloading the page and (seemingly) repeating the process over and over again (without saving any new images for that matter).

Anders

patryk · 10-17-2012, 06:25 PM

sorry about that. i was typing this thing half asleep and i forgot quotation

here's fixed version:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload="reload()">
<?php
//configuration

//directory with original images
$in_dir = 'pics';

//directory for resized images
$out_dir = 'resized';

//target canve's size
$size = '800x800';

//how many pics to process in one run.
//keep it rather low to avoid timeouts
//(it will re-run itself as many times as needed anyways)
$limit = 2;

if(!is_dir($in_dir)){
    die('wrong input directory!</body>');
}
if(!is_dir($out_dir)){
    die('wrong output directory!</body>');
}
if(!file_put_contents($out_dir . '/__writetest', '1')){
    die('can\'t write to output directory. check permissions!</body>');
}else{
    unlink($out_dir . '/__writetest');
}
$files = glob($in_dir . '/*');

$i = 0;
$ii = 0;
while(isset($files[$i])){
    if(preg_match('/.+(png|jpg|jpeg|gif|bmp|pcx)/i', basename($files[$i]))){
        if(!file_exists($out_dir . '/' .  basename($files[$i])) && $ii < $limit){
            $file1 = $files[$i];
            $file2 = $out_dir . '/' .  basename($files[$i]);
            $command = 'convert "' . $file1 . '" -resize ' . $size . ' -size ' . $size . ' xc:white +swap -gravity center -composite "' . $file2 . '"';
            shell_exec($command);
            echo 'Resized ' . $files[$i] . ' and saved as ' . $file2 . '<br />';
            $ii++;
        }
    }
    $i++;
}
echo '<br /><br /><noscript>reload to proccess next images</noscript>';

    echo '<script language="javascript">' . "\n";
    echo 'function reload(){' . "\n";
if($ii > 0){
    echo 'window.location = \'' . $_SERVER['PHP_SELF'] . '?rand=' . rand(0, 999999999999) . '\';' . "\n";
}else{
    echo 'alert(\'all pics resized\');' . "\n";
}
    echo '}' . "\n";
    echo '</script>' . "\n";
?>
</body>
</html>

andersedvardsen · 10-19-2012, 08:22 AM

Thanks a bunch! Wish i had you on speed dial, haha.

To keep this ball rolling: Is it possible to also att to the script that the finished result image should have som extra white canvas space around the edges? For instance if the product in my product image originally streches all the way to the edge of the image, it would be nice to add som "margins" to the end result.

So how would i for example add 30pc extra white space in the height and 15 px extra white space in the width after the other magic has been worked?

Anders

patryk · 10-19-2012, 08:34 AM

you can do pretty much everything photoshop can do.
be more speciffic.
all pics or just selected?

StevenHu · 10-25-2012, 09:22 PM

If you are inputting all these images yourself, you could simply do a batch file convert in Photoshop where it converts all images to 800px width. Then remove the images that are tall and batch resize them to 800px height. Then you won't need any coding at all.

If you want them all to be square, then simply batch convert all the 800px tall images to 800px wide with white background, and batch convert the wide images to 800px tall with white background.

When all is done, you can batch convert them all to 150px for thumbnails.

If you want a border around each image, then you should do it with CSS so you can adjust it globally.