?
Solved

Image Merge

Posted on 2007-11-13
7
Medium Priority
?
1,209 Views
Last Modified: 2013-12-25
See the sample site. I need to "merge" the two images so that the picture of the boy is overlyed with the frame, with the inner part of the frame transparent & the outer part overcovering the "edge" portions of the picture.

At the moment, the Pticture of the boy is a jpg & the frame is a transparent gif. I can make the frame a jpg.

Is there a way to do this using the php image functions, or, if not, using something else?
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
  • 4
  • 3
7 Comments
 
LVL 20

Accepted Solution

by:
steelseth12 earned 2000 total points
ID: 20275393
Try this

<?
 
 //soource image change accordingly
$image = imagecreatefromjpeg("myimage.jpg");      

//overlay image change accordingly
$overlay = imagecreatefromgif("imgoverlay.gif");

// 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 = $width_o ;
$new_height = ($height * ($new_width/$width)) ;


//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,$height_o);

imagejpeg($image_resized);

?>
0
 

Author Comment

by:Richard Korts
ID: 20275874
To steelseth12:

EXCELLENT! The only thing that didn't work from your php was: imagejpeg($image_resized);, that produces a bunch of gibberish characters in the browser. But no issue, I just saved it to a file & displayed the file in the browser.
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20275939
Glad i could help.
For imagejpeg() to work correctly i would need no other data to be outputed to the browser .... so the browser sees the file as an image ..

Normally the way i do it is put all the image creation code in a file by itself and then give it as a source to the <img> tag

i.e

<img src='create_image.php'>
0
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 

Author Comment

by:Richard Korts
ID: 20276044
To steelseth12,

So there is another thing I perhaps did NOT address in the original question. I'll put it here, in case you can answer directly, but what I need is to be able to "blot out" all aspects of the original image that are OUTSIDE the overlay frame. Think of the overlay as a picture frame, we want the excess outside the frame cut off. I can of course make the outside black or a light gray or ?? but any color other than white will look strange.

If you want I will start a new question & you can look for it. I'll put it in the same categories, etc.

Let me know.

Thanks,

rkorts
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20276158
Why not make the outsite of the border white
e.g https://filedb.experts-exchange.com/incoming/ee-stuff/5564-imgoverlay.gif
There are ways to calculate it in php but it requires alot of work and it will put unnecessary strain on the server.
0
 

Author Comment

by:Richard Korts
ID: 20276205
To steelseth12,

I got the image, thanks. But the inside is now black. Don't I have to change something in the php code?

Thanks,

rkorts
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 20276239
Black ? No you shouldnt have to change anything ... it displays fine on my local host.

Thats strange ... try it with a png https://filedb.experts-exchange.com/incoming/ee-stuff/5565-imgoverlay.png

change

$overlay = imagecreatefromgif("imgoverlay.gif");
to
$overlay = imagecreatefrompng("imgoverlay.png");
0

Featured Post

Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
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 create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

800 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