Solved

php Image Functions

Posted on 2007-11-24
21
347 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
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

Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

Question has a verified solution.

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

Suggested Solutions

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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…

738 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