Solved

php Image Functions

Posted on 2007-11-24
21
335 Views
Last Modified: 2013-12-25
See the example, http://www.rkassoc.net/MyBallStore/ee_example.htm.

I want to use php image functions to accomplish the following

I want to copy the image called "Boy in Frame" into the Green Ball. First, I need to resize / resample the "Boy in Frame" to a width of 250 and retain the aspect ratio. Then I need the copied image to fit into the area on the ball inbetween the stiching so that the "Boy in Frame" appears on top of the ball. The white areas outside the frame need to be transparent so that the green of the ball "shows through"

I know that the coordinates on the ball image where the upper right corner of the resized image go are x = 103, y = 133 (from left & top).

I've tried several approaches but I can't get it to work.

Please provide sample code.

0
Comment
Question by:Richard Korts
  • 8
  • 8
  • 3
  • +1
21 Comments
 
LVL 7

Expert Comment

by:dansoto
ID: 20344481
Link not valid.
0
 
LVL 7

Expert Comment

by:dansoto
ID: 20344485
Sorry...first link is bad.  Second one works.
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20344486
First, your url is a dead link?

for your resize, you can use this thumbnail script provided below, which keeps the aspect ratio. This is assuming you have the image stored in a variable called $image.

For the next parts i think you will need something to do with imageoverlay.
<?php
 

// Assume you have an image stored in variable $image

$filetype = filetype($image);

$dimensionX = "50";

$dimensionY = "32";
 

function scaleAxis($a, $b){

	//calculate the image axis while maintaining proportion

	return $b / (($a + 1) / $a);

}
 
 

function scaleImage($width, $height, $maxBoundW, $maxBoundH){

	//tests height vs width and scales the image based on the larger axis

	if ($height > $width){

  

		while ($width + 1 > $maxBoundW) {

		    $height -= 1;	    

		    $width = scaleAxis($height, $width);

		}

		

		while ($height + 1 > $maxBoundH) {

		    $height -= 1;	    

		    $width = scaleAxis($height, $width);

		}

		

	}elseif($width > $height){

	  	

			while ($width + 1 > $maxBoundW) {

			    $width -= 1;	    

			    $height = scaleAxis($width, $height);

			}

			

			while ($height + 1 > $maxBoundH) {

			    $width -= 1;	    

			    $height = scaleAxis($width, $height);

			}

			

	}else{

			while ($width + 1 > $maxBoundW) {

			    $height -= 1;	    

			    $width = scaleAxis($height, $width);

			}

			

			while ($height + 1 > $maxBoundH) {

			    $height -= 1;	    

			    $width = scaleAxis($height, $width);

			}

	}

	

	$imageXy['x'] = $width;

	$imageXy['y'] = $height;

	

	return $imageXy;

}
 
 

//set the output type

header("Content-type: $filetype");
 

// resize image

$im = imagecreatefromstring($result);
 

$imageXy = "";

$imageXy = scaleImage(imagesx($im), imagesy($im), $dimensionX,  $dimensionY);
 

$imgw = $imageXy['x'];

$imgh = $imageXy['y'];
 

// create thumbnail

$thumb=ImageCreateTrueColor($imgw,$imgh);

ImageCopyResampled($thumb,$im,0,0,0,0,$imgw,$imgh,ImageSX($im),ImageSY($im));
 

//display output

$out = ImagejpeG($thumb);

print($out);
 

// clean memory

imagedestroy ($im);

imagedestroy ($thumb);
 

?>

Open in new window

0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20344488
For imageoverlay of 2 images, you can use the script below. The combination of the 2 scripts should do what you want.
<?php

 

 //soource image change accordingly

$image = imagecreatefromjpeg("myimage.jpg");      
 

//overlay image change accordingly

$overlay = imagecreatefrompng("imgoverlay.png");
 

// Get X and Y size of existing image

$width = imagesx($image);

$height = imagesy($image);
 

// Get X and Y size of overlay

$width_o = imagesx($overlay);

$height_o = imagesy($overlay);
 
 

//Set X & Y to 90% of overlay image

$new_width = $width_o * 0.9;

$new_height = ($height * ($new_width/$width)) * 0.9;
 
 

//Get destination coordinates

$dst_w = round(($width_o - $new_width)/2);

$dst_h = round(($height_o - $new_height)/2);

                             

//create new image

$image_resized = imagecreatetruecolor($width_o, $height_o);
 

//allocate color

$bg = imagecolorallocate($image_resized,255,255,255);
 

//fill image with white background

imagefilledrectangle($image_resized, 0, 0, $width_o , $height_o , $bg);
 

//copy source image to new image

imagecopyresampled($image_resized, $image, $dst_w, $dst_h , 0, 0, $new_width, $new_height, $width, $height);
 

//copy new image to overlay

imagecopy($image_resized, $overlay, 0,0,0,0,$width_o,$width_o);
 

imagejpeg($image_resized);
 

?>

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 20344505
To all,
Here is the proper link.

http://www.rkassoc.net/MyBallStore/ee_sample.htm
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20344842
@nizsmo
THAT IS MY SCRIPT THAT YOU ARE POSTING AS YOUR OWN.
AND GUESS WHAT IT WAS FOR THIS ASKER I ORIGINALLY WROTE IT I N THE FIRST PLACE.
EITHER WRITE YOUR OWN STUFF OR GIVE CREDIT TO THE PERSON YOU STOLE THEM FROM.

http://www.experts-exchange.com/Web_Development/Images/Q_22958460.html
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20344903
sorry steelseth12, i did recall copying it and did label it on my computer as from EE but didn't record down who wrote it, sorry about that. All credits to steelseth for the latter imageoverlay , and no need to say i stole them, as I didn't say i wrote them, but it was my fault for not giving credit to you, apologies!
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20346191
Nizsmo please understand that my comments are not intended to offend you although reading back at this one it does seem a bit harsh sorry. However this is not the place to discuss this, if you want send me an email.

rkorts is there a problem with the script your are currently using or is it just the image you are having problems with ?
0
 

Author Comment

by:Richard Korts
ID: 20346403
To steelseth12:

I posted this new question because a variation on what you posted DID NOT work. I was trying to use that. There are subtle differences in this case.

I am interested in solving this problem, not in getting ito a battle between two experts.

If you & nizsmo want to argue, please do it elsewhere.
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20346461
rkorts i know this is a battle field thats why i asked nizsmo to email me.

Back to your problem can you explain the differences ?

From what i can see you are using a non - transparent image image for the overlay.
What the scipt does is .. it takes the overlay image and places it above the image of the boy.

Are there any other differences i should know about ?
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:Richard Korts
ID: 20346469
To nizsmo:

I tried your resample function. It didn't work. I did my own & it works fine.

I used the overlay code you provided, slightly modified to use my actual images. The result is only the overlay image slightly cut off at the bottom. See http://www.rkassoc.net/MyBallStore/ball_merge.php.

The code is attached in the "snippet".

What's wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 

<html>

<head>

	<title>Merge Frame with Ball</title>

</head>
 

<body>

<?php

$mrs = "images/merged_resampled.jpg";

//overlay image change accordingly

$frame_raw = imagecreatefromjpeg("images/merged4.jpg");

$frame = imagecreatetruecolor(250, 284);

// resample the picture in frame to 250 wide

imagecopyresampled($frame, $frame_raw,0,0,0,0,250,284,300,341);

if (file_exists($mrs)) {

	unlink($mrs);

}	

imagejpeg($frame, $mrs);

 

 //soource image change accordingly

$image = imagecreatefromjpeg("images/green_ball.jpg");      

 

//overlay image change accordingly

$overlay = imagecreatefromjpeg($mrs);

 

// Get X and Y size of existing image

$width = imagesx($image);

$height = imagesy($image);

 

// Get X and Y size of overlay

$width_o = imagesx($overlay);

$height_o = imagesy($overlay);

 

 

//Set X & Y to 90% of overlay image

$new_width = $width_o * 0.9;

$new_height = ($height * ($new_width/$width)) * 0.9;

 

 

//Get destination coordinates

$dst_w = round(($width_o - $new_width)/2);

$dst_h = round(($height_o - $new_height)/2);
 

                             

//create new image

$image_resized = imagecreatetruecolor($width_o, $height_o);

 

//allocate color

$bg = imagecolorallocate($image_resized,255,255,255);

 

//fill image with white background

imagefilledrectangle($image_resized, 0, 0, $width_o , $height_o , $bg);

 

//copy source image to new image

imagecopyresampled($image_resized, $image, $dst_w, $dst_h , 0, 0, $new_width, $new_height, $width, $height);

 

//copy new image to overlay

imagecopy($image_resized, $overlay, 0,0,0,0,$width_o,$width_o);

$bm = "images/ball_merged.jpg";

imagejpeg($image_resized, $bm);

 

?>
 

Merged with Ball<br><br>

<img src="images/ball_merged.jpg">

</body>

</html>

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 20346493
To steelseth12:

The transprency is probably at least part of the problem. Is the ONLY transparent image a gif? I have the resampled image saved as a jpg. Can I save it as a gif and force the outer parts (white) to be transparent?

I think I see how to do this with imagecolorallocate & imagecolortransparent. Can you give me a sample? Say the image is called "merged_resampled.jpg". How can I contert that to a gif with transparency color white?
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20346514
Changing the original code slightly to comply with ...  
103, y = 133 (from left & top).
and
 "Boy in Frame" to a width of 250

Find attached below.

And using slightly modified images ... ie the ball with the inner part cut off ... and the boy with green background , i think i get the result you want

Please download the images below ans let me know if this is what you want

https://filedb.experts-exchange.com/incoming/ee-stuff/5804-green_ball.png

https://filedb.experts-exchange.com/incoming/ee-stuff/5805-merged4.jpg




<?

 

 //soource image change accordingly

$image = imagecreatefromjpeg("merged4.jpg");      
 

//overlay image change accordingly

$overlay = imagecreatefrompng("green_ball.png");
 

// Get X and Y size of existing image

$width = imagesx($image);

$height = imagesy($image);
 

// Get X and Y size of overlay

$width_o = imagesx($overlay);

$height_o = imagesy($overlay);
 
 

//Set X & Y  of overlay image

$new_width = 250 ;

$new_height = ($height * ($new_width/$width)) ;
 
 

//Get destination coordinates

$dst_w = 103;

$dst_h = 133;

                             

//create new image

$image_resized = imagecreatetruecolor($width_o, $height_o);
 

//allocate color

$bg = imagecolorallocate($image_resized,2,109,101);
 

//fill image with white background

imagefilledrectangle($image_resized, 0, 0, $width_o , $height_o , $bg);
 

//copy source image to new image

imagecopyresampled($image_resized, $image, $dst_w, $dst_h , 0, 0, $new_width, $new_height, $width, $height);
 

//copy new image to overlay

imagecopy($image_resized, $overlay, 0,0,0,0,$width_o,$height_o);
 

imagejpeg($image_resized);
 

?>

Open in new window

0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20346534
There are many formats that support transparency ... from the ones used for web gif , png support transparency .

Im sorry i dont understand the following ..  

Can I save it as a gif and force the outer parts (white) to be transparent?

I think I see how to do this with imagecolorallocate & imagecolortransparent. Can you give me a sample? Say the image is called "merged_resampled.jpg". How can I contert that to a gif with transparency color white?
0
 

Author Comment

by:Richard Korts
ID: 20347767
To steelseth12:

I tried it and it doesn't work. It seems to me that the green baseball should be the background & the merged file the overlay, but I tried it that way & it failed so I tried it your way & it also fails.

See http://www.rkassoc.net/MyBallStore/ball_merge2.php. All it shows is the ball. When I do it the other way around (http://www.rkassoc.net/MyBallStore/ball_merge1.php) it shows the boy in frame only.

The code behind this (ball_merge2.php) is the attached code snippet.

What's wrong?

Or maybe the both have to be png???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 

<html>

<head>

	<title>Merge Frame with Ball</title>

</head>
 

<body>

<?php

 

 //source image change accordingly

$image = imagecreatefromjpeg("images/merged_resampled.jpg");      

 

//overlay image change accordingly

$overlay = imagecreatefrompng("images/green_ball.png");

 

// Get X and Y size of existing image

$width = imagesx($image);

$height = imagesy($image);

 

// Get X and Y size of overlay

$width_o = imagesx($overlay);

$height_o = imagesy($overlay);

 

 

//Set X & Y  of overlay image

$new_width = 250 ;

$new_height = ($height * ($new_width/$width)) ;

 

 

//Get destination coordinates

$dst_w = 103;

$dst_h = 133;

                             

//create new image

$image_resized = imagecreatetruecolor($width_o, $height_o);

 

//allocate color

$bg = imagecolorallocate($image_resized,2,109,101);

 

//fill image with white background

imagefilledrectangle($image_resized, 0, 0, $width_o , $height_o , $bg);

 

//copy source image to new image

imagecopyresampled($image_resized, $image, $dst_w, $dst_h , 0, 0, $new_width, $new_height, $width, $height);

 

//copy new image to overlay

imagecopy($image_resized, $overlay, 0,0,0,0,$width_o,$height_o);

$bm = "images/ball_merged.jpg";

if (file_exists($bm)) {

	unlink($bm);

}	

imagejpeg($image_resized, $bm); 
 

?>
 

Merged with Ball<br><br>

<img src="images/ball_merged.jpg">

</body>

</html>

Open in new window

0
 
LVL 20

Accepted Solution

by:
steelseth12 earned 500 total points
ID: 20347776
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20347801
>>It seems to me that the green baseball should be the background & the merged file the overlay

For it to work that way. The calculations that would need to be done so that the image of the boy is cut to fit inside that stitches of the baseball, it would be like trying to write a script that reads Turing Codes. (Tryed it once btw it took 2 weeks to write and in the end it didnt work as expected).

Anyways can you check with the images i gave you to see if thats the result you want, because its 3:30 AM over here and im planning to go to bed.  
0
 

Author Comment

by:Richard Korts
ID: 20347822
To steelseth12:

OK, that's PERFECT. However, I need to know what you did to the two images merged4.jpg & green_ball.png. I saved green_ball as a png (Aha, maybe I didn't get the transparency)??

Obviously, I need to be able to programatically reproduce this regardless of the image uploaded by the customer & there are several frames.

Boy, this thing is a STRUGGLE!!

And my customer STILL won't like it because of the pixelization of the frame (but that's a separate issue).

Thanks for ALL your help. You are obviously an expert on this. I suspect I'll have other similar questions shortly.
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20350237
>>However, I need to know what you did to the two images merged4.jpg & green_ball.png. I saved green_ball as a png (Aha, maybe I didn't get the transparency)??

You need to make the area of the overlay image, that the image of the boy is going to be placed in transparent. I just cut that portion of the image in photoshop and saved it as png.

>>Obviously, I need to be able to programatically reproduce this regardless of the image uploaded by the customer & there are several frames.

Is the customer going to upload the overlay images or just the images of the boy(s) or both?
0
 

Author Comment

by:Richard Korts
ID: 20350866
There are about 6 "frames" that will be standard. The Customer will select a frame, then upload a photo that they want on the ball. The first part (that you helped me with earlier) is for the customer to position the photo they uploaded so that the frame is over their photo the way they want it. I have got that down pretty good. The jpg merged4.jpg in this example is the result of that.

The 2nd part (which this question is about) is to "paste" the framed image into the ball. BTW, there are about 10 different ball colors, so this green one is just an example. But I think I see how to do the others based on how you did this.
0
 

Author Comment

by:Richard Korts
ID: 20358727
To steelseth12,

I have one more related question. How can I use the php image functions to convert the jpeg image merged4.jpg into the version you created with the green background? Seems I have to make it into a png or gif with the white outside the frame transparent, then copy onto a solid green background. Or is it the other way around?

Can you help?
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now