Solved

php Image Functions

Posted on 2007-11-24
21
352 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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
 

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

Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

624 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