asked on

Add whitespace to image and save file to server

I have a script that generates some HTML for newsletters. I'm floating an image using "align=left" and wrapping text around it. I use an inline CSS style, in this case margin-right, to give the image some breathing room. Outlook ignores this. Outlook also ignores padding - I even tried a 10px border-right, it ignored that, too.

I can't change the layout and put the image in a table. I am thinking of using GD to manipulate the image, adding 8px of whitespace to the right side of it. The catch is, since this is a newsletter going out to thousands of people, is that I then need to save the modified image to the server somewhere so I can link to it. I don't want to generate this on the fly.

I have zero experience with GD or saving files to a location with PHP. Here is my image code:

<img alt="<?php print $main2['title']; ?>" height="127" width="185" src="http://www.mydomain.com/uploads/<?php print $main2['filename']; ?>" align="left" style="margin:8px 8px 0 0;"/>

Open in new window

Ray Paseur

Please post a sample image here. I can show you the PHP code, but I want to test it before I post it. Thanks, ~Ray

michaelgiaimo

ASKER

airport.jpg

Ray Paseur

Cool, thanks! I have to leave for work now, but I will be able to give you a script a little later this morning. Where is the airport?

michaelgiaimo

ASKER

Thanks - it's in Dubai.

Ray Paseur

See http://www.laprbass.com/RAY_temp_michaelgiaimo.php

<?php // RAY_temp_michaelgiaimo.php
error_reporting(E_ALL);


// DEMONSTRATE HOW TO ADD TRANSPARENT PADDING TO THE RIGHT SIDE OF AN IMAGE

// MAN PAGES
// http://php.net/manual/en/function.imagesx.php
// http://php.net/manual/en/function.imagesy.php
// http://php.net/manual/en/function.imagecolorat.php
// http://php.net/manual/en/function.imagecolorsforindex.php
// http://php.net/manual/en/function.imagecreatetruecolor.php
// http://php.net/manual/en/function.imagefill.php
// http://php.net/manual/en/function.imagecolorallocate.php
// http://php.net/manual/en/function.imagecopyresampled.php
// http://php.net/manual/en/function.imagecopymerge.php
// http://php.net/manual/en/function.imagecolortransparent.php
// http://php.net/manual/en/function.imagepng.php
// http://php.net/manual/en/function.imagedestroy.php


// LOCATION OF THE IMAGE (MAYBE FROM $_GET URL STRING?)
$url = 'http://filedb.experts-exchange.com/incoming/2012/01_w01/t537963/airport.jpg';
$src = imageCreateFromJPEG($url);

// GET THE ORIGINAL DIMENSIONS
$src_wide = imagesX($src);
$src_high = imagesY($src);

// USE LOWER RIGHT PIXEL TO DETERMINE ITS TRANSPARENCY
$pixel = imageColorAt($src, $src_wide-1, $src_high-1);
$clear = imageColorsForIndex($src, $pixel);

// COMPUTE DIMENSIONS FOR THE NEW IMAGE
$dst_wide = $src_wide +10;
$dst_high = $src_high;

// CREATE A NEW IMAGE RESOURCE AT THE NEW SIZE
$dst = imageCreateTrueColor($dst_wide, $dst_high);

// FILL THE IMAGE WITH THE CLEAR BACKROUND COLOR
$clear = imageColorAllocate($dst, $clear["red"], $clear["green"], $clear["blue"]);
imageFill($dst, 0, 0, $clear);

// COPY THE IMAGE
imageCopyMerge
( $dst
, $src
, 0
, 0
, 0
, 0
, $src_wide
, $src_high
, 100
)
;

// SET BACKGROUND TO COMPLETELY TRANSPARENT
// imageColorTransparent($dst, $clear);

// STORE THE IMAGE ON THE SERVER
imagePNG($dst, 'RAY_junk/EE_temp_michaelgiaimo.png', 9, PNG_ALL_FILTERS);

// OR ACTIVATE THIS TO SEND THE IMAGE TO THE BROWSER
// header('Content-type: image/png');
// imagePNG($dst);

// FREE THE RESOURCES
imageDestroy($src);
imageDestroy($dst);

// SHOW THE STORED IMAGE
echo '<body bgcolor="black">';
echo '<img src="RAY_junk/EE_temp_michaelgiaimo.png" />';

Open in new window

Ray Paseur

Still tinkering... This may be a little bit better. HTH, ~Ray

<?php // RAY_image_pad_right.php
error_reporting(E_ALL);


// DEMONSTRATE HOW TO ADD WHITE PADDING TO THE RIGHT SIDE OF AN IMAGE


// MAN PAGES
// http://php.net/manual/en/function.imagecreatefromjpeg.php
// http://php.net/manual/en/function.imagesx.php
// http://php.net/manual/en/function.imagesy.php
// http://php.net/manual/en/function.imagecolorat.php
// http://php.net/manual/en/function.imagecolorsforindex.php
// http://php.net/manual/en/function.imagecreatetruecolor.php
// http://php.net/manual/en/function.imagefill.php
// http://php.net/manual/en/function.imagecolorallocate.php
// http://php.net/manual/en/function.imagecopyresampled.php
// http://php.net/manual/en/function.imagecopymerge.php
// http://php.net/manual/en/function.imagecolortransparent.php
// http://php.net/manual/en/function.imagepng.php
// http://php.net/manual/en/function.imagedestroy.php


// LOCATION OF THE IMAGE (MAYBE FROM $_GET URL STRING?)
$url = 'http://filedb.experts-exchange.com/incoming/2012/01_w01/t537963/airport.jpg';
$src = imageCreateFromJPEG($url);

// GET THE ORIGINAL DIMENSIONS
$src_wide = imagesX($src);
$src_high = imagesY($src);

// USE LOWER RIGHT PIXEL TO DETERMINE ITS TRANSPARENCY
$pixel = imageColorAt($src, $src_wide-1, $src_high-1);
$clear = imageColorsForIndex($src, $pixel);

// OR JUST USE WHITE
$clear = array
( 'red'   => 255
, 'green' => 255
, 'blue'  => 255
)
;

// COMPUTE DIMENSIONS FOR THE NEW IMAGE
$dst_wide = $src_wide +10;
$dst_high = $src_high;

// CREATE A NEW IMAGE RESOURCE AT THE NEW SIZE
$dst = imageCreateTrueColor($dst_wide, $dst_high);

// FILL THE IMAGE WITH THE CLEAR BACKROUND COLOR
$clear = imageColorAllocate
( $dst
, $clear["red"]
, $clear["green"]
, $clear["blue"]
)
;
imageFill($dst, 0, 0, $clear);

// COPY THE IMAGE INTO THE NEW IMAGE RESOURCE
imageCopyMerge
( $dst
, $src
, 0
, 0
, 0
, 0
, $src_wide
, $src_high
, 100
)
;

// STORE THE IMAGE ON THE SERVER
imagePNG($dst, 'RAY_junk/EE_temp_michaelgiaimo.png', 9, PNG_ALL_FILTERS);

// OR ACTIVATE THIS TO SEND THE IMAGE TO THE BROWSER
// header('Content-type: image/png');
// imagePNG($dst);

// FREE THE RESOURCES
imageDestroy($src);
imageDestroy($dst);

// SHOW THE STORED IMAGE
echo '<body bgcolor="black">';
echo '<img src="RAY_junk/EE_temp_michaelgiaimo.png" />';

Open in new window

michaelgiaimo

ASKER

Thanks so much, will play around with this. BTW - no need for clear, padding can definitely just be white.

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

michaelgiaimo

ASKER

Sorry, one more thing we can simplify - the source image will ALWAYS be 185px wide x 127px high. No need to get dimensions.

Ray Paseur

No problem getting the dimensions. You might consider how you want to set the padding, but that's a separate line of inquiry. If all you need is right-side white space, this would do the trick.

michaelgiaimo

ASKER

Thanks man, this worked perfectly!

michaelgiaimo

ASKER

PERFECT!

Ray Paseur

Thanks for the points -- it's a great question! ~Ray