1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image over image combined on web

Discussion in 'Graphics & Multimedia' started by tomyoung, Aug 19, 2005.

0
  1. #1
    HI guys

    need some help here, I stuck here for a while now.
    All I am trying to do is to combine image_file1.gif and image_file2.gif (semi transparent)

    bottom layer is image_file1.gif top layer is image_file2.gif

    I could to it with any image editing program, no problem

    The thing is I would like to combine them on a website.

    Let's say an user, choose to combine image 1 (bottom layer) AND then choose image 2 (top layer), one it is submitted, those two files will be combined together and display on a new page.

    I don't know how to do it, anyone who has experienced this situation would be lovely if I can get some tips.

    What script should I use? What technique should I use? May be technology is not supporting yet? I have no Idea.

    Please Please Please help


    Cheers,

    Yanto
     
    tomyoung, Aug 19, 2005 IP
  2. Willy

    Willy Peon

    Messages:
    281
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi Tom, and welcome to DP :)

    You can do it server-side with PHP libraries such as GD2, but I think the simplest approach, not to mention the most efficient, would be to just do it on client-side with CSS stylesheets, by stacking the images on top of each other and making the top one transparent or partially translucent. Try Googling for "css image overlay transparent".
     
    Willy, Aug 19, 2005 IP
  3. tomyoung

    tomyoung Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    HI willy

    Thanks for the advice, I really appreciate it.
    I have just tried the CSS stylesheet one my old friend suggested.

    It turns out that the bottom image is fine, the top image, with gif extension (totally background transparent), once combined the background of the top image becomes white.

    When I tried another file extension using .png for the top image (totally background transparent), once combined the background of the top image becomes grey. I don't know what went wrong, but I will have more trials and errors.

    In the mean time, I will also try with the server side php using GD2 libraries as you suggest, when I have the result I will post again here.

    Anyone please feel free to give some tips

    Many Thanks


    Yanto
     
    tomyoung, Aug 19, 2005 IP
  4. Willy

    Willy Peon

    Messages:
    281
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Remember that Internet Explorer has serious issues with PNG images; that may have been the problem in the second try, if you use IE... :(
     
    Willy, Aug 19, 2005 IP
  5. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #5
    Another option is imagemagick - the convert program included as part of the package could easily do what you need. There are perl libraries if you wanted to do it from a cgi or if you wanted to do it from php, you could use shellexec().

    here's some code I wrote a while back - it doesn't do what you need, but it's close enough that you can get the idea of how to put together a command string to run convert.

    My script just writes text on a plain background. I haven't had the need to develop it further, but I wanted to know that I could do it when the time comes to build what I needed.

    This assumes imagemagick is installed in the /usr/bin directory and you have rights to execute. It also assumes you have the same fonts available that I do. If a font doesn't work, try another one. There may be other assumptions. I wrote this a long time ago and didn't comment it very well at all. (I named the script img.php)

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Text Image Builder</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php
$text = $_POST['imagetext'];
$dimensions = $_POST['dimensions'];
$background = $_POST['background'];
$font = $_POST['font'];
$points = $_POST['points'];
$executed = "NO";
$commandstring = "echo \"".$text."\" | /usr/bin/convert -background ".$background." -page ".$dimensions." -font ".$font." -pointsize ".$points." text:- /usr/local/apache/hosts/mysite/images/mg/test.gif";
if (!($text == NULL)){
$executed = "YES";
$output = shell_exec($commandstring);
}
?>
</head>

<body>
<? echo $_POST['imagetext']; ?>
<form action="/img.php" method="post" enctype="application/x-www-form-urlencoded" name="Image Create" target="_self">
  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>Image Text</td>
      <td><input name="imagetext" type="text" value=<? echo "\"".$text."\""; ?> size="80" maxlength="30"></td>
    </tr>
    <tr>
      <td>Dimensions</td>
      <td><input type="text" name="dimensions" value=<? echo "\"".$dimensions."\""; ?> size="20" maxlength="10"></td>
    </tr>
    <tr>
      <td>Background</td>
      <td><input type="text" name="background" value=<? echo "\"".$background."\""; ?> size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td valign="top">Font</td>
      <td><select name="font">
          <option value="AvantGarde-Book" selected> AvantGarde-Book</option>
          <option value="AvantGarde-BookOblique"> AvantGarde-BookOblique</option>
          <option value="AvantGarde-Demi"> AvantGarde-Demi</option>
          <option value="AvantGarde-DemiOblique"> AvantGarde-DemiOblique</option>
          <option value="Bookman-Demi"> Bookman-Demi</option>
          <option value="Bookman-DemiItalic"> Bookman-DemiItalic</option>
          <option value="Bookman-Light"> Bookman-Light</option>
          <option value="Bookman-LightItalic"> Bookman-LightItalic</option>
          <option value="Courier"> Courier</option>
          <option value="Courier-Bold"> Courier-Bold</option>
          <option value="Courier-Oblique"> Courier-Oblique</option>
          <option value="Courier-BoldOblique"> Courier-BoldOblique</option>
          <option value="Helvetica"> Helvetica</option>
          <option value="Helvetica-Bold"> Helvetica-Bold</option>
          <option value="Helvetica-Oblique"> Helvetica-Oblique</option>
          <option value="Helvetica-BoldOblique"> Helvetica-BoldOblique</option>
          <option value="Helvetica-Narrow"> Helvetica-Narrow</option>
          <option value="Helvetica-Narrow-Oblique"> Helvetica-Narrow-Oblique</option>
          <option value="Helvetica-Narrow-Bold"> Helvetica-Narrow-Bold</option>
          <option value="Helvetica-Narrow-BoldOblique"> Helvetica-Narrow-BoldOblique</option>
          <option value="NewCenturySchlbk-Roman"> NewCenturySchlbk-Roman</option>
          <option value="NewCenturySchlbk-Italic"> NewCenturySchlbk-Italic</option>
          <option value="NewCenturySchlbk-Bold"> NewCenturySchlbk-Bold</option>
          <option value="NewCenturySchlbk-BoldItalic"> NewCenturySchlbk-BoldItalic</option>
          <option value="Palatino-Roman"> Palatino-Roman</option>
          <option value="Palatino-Italic"> Palatino-Italic</option>
          <option value="Palatino-Bold"> Palatino-Bold</option>
          <option value="Palatino-BoldItalic"> Palatino-BoldItalic</option>
          <option value="Times-Roman"> Times-Roman</option>
          <option value="Times-Bold"> Times-Bold</option>
          <option value="Times-Italic"> Times-Italic</option>
          <option value="Times-BoldItalic"> Times-BoldItalic</option>
          <option value="Symbol"> Symbol</option>
        </select>
        &nbsp <input name="points" type="text" value="14" size="10" maxlength="3"></td>
    </tr>
    <tr>
      <td valign="top">&nbsp;</td>
      <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
  </table>
  </form>
  
<p><? if($executed == "YES") {echo $commandstring."<br>".$output."<br>".$text."<br>".$executed;} ?> </p>
<p><img name="example" src="/images/mg/test.gif" alt="example">
<a href=/images/mg/test.gif>direct link</a></p>
</body>
</html>
    PHP:
     
    nevetS, Aug 19, 2005 IP
    Nitin M likes this.
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Here's a little example on how you can overlap two GIF files. The example rotates background color, so you can see how GIF blends in (not very well - there's no levels of transparency). The circles initially were 50%-transparent in the imaging program, but this info is lost when the file is saved as a GIF - this is why you can't see the black square underneath.

    Copy all files in the example to the same directory and click on the HTML file (IE will give you a warning because there's a JS method call in the onload handler - you can either allow it or block it, doesn't matter).

    J.D.
     
    J.D., Aug 19, 2005 IP
  7. jgcalifornia

    jgcalifornia Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    will this work if one of these has a click able link on it?
     
    jgcalifornia, Oct 19, 2009 IP