472,374 Members | 1,413 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,374 software developers and data experts.

Need GD Library Imagecreate to display on same page

See example here

Ultimately I want the image created to display next to the update button in the same browser window instead of loading into a new window. Then every time I input text and click 'update' the image is regenerated. As if you're customizing the image with whatever text the user inputs.

A similar example I've found online is here.

I'm simply just posting the text input variable to a PHP file to generate the image in the following PHP file:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. $my_img = imagecreate( 200, 80 );
  3. $background = imagecolorallocate( $my_img, 0, 0, 255 );
  4. $text_colour = imagecolorallocate( $my_img, 255, 255, 0 );
  5. $line_colour = imagecolorallocate( $my_img, 128, 255, 0 );
  6. $input_text = $_REQUEST['name'] ;
  7. imagestring( $my_img, 4, 30, 25, $input_text,
  8.   $text_colour );
  9. imagesetthickness ( $my_img, 5 );
  10. imageline( $my_img, 30, 45, 165, 45, $line_colour );
  12. header( "Content-type: image/png" );
  13. imagepng( $my_img );
  14. imagecolordeallocate( $line_color );
  15. imagecolordeallocate( $text_color );
  16. imagecolordeallocate( $background );
  17. imagedestroy( $my_img );
  18. ?>
I've searched high and low to resolve this but had no luck - hoping somebody can help...
Jan 31 '10 #1
14 4702
250 Expert 100+
You should look into using Ajax or you could have the display portion embedded in an iFrame. Regardless, you'll have to use JavaScript to do the interactions with the server and then perform DOM manipulations to display the returned results. If you go the simpler iFrame route, you'd only have to tell the iframe to load itself with the correct url and params on your server.
Jan 31 '10 #2
Thanks for the prompt response. How can I modify the PHP output file to target an iframe?
Jan 31 '10 #3
1,044 Expert 1GB
Hmm? You'll want to add JavaScript to communicate with the iframe. I find that it's easier to simply alter the DOM, though. Is this image created in image.php? Then, you could allow image.php to take a string as a query string variable. Then, you could just alter the "src" attribute of an <img> element.

Basically, you'd use JavaScript to access the <img> element and the <input> element and, when the update button is pressed for, then change the "src" attribute of the <img> element to something like "http://website.tld/image.php?name=***" where you'd replace "***" with the value of the <input> element.
Feb 1 '10 #4
250 Expert 100+
kovik's suggestion would be the simplest and most expedient...

Here's a basic html page that will hopefully get you going:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Untitled Document</title>
  6.     <script type="text/javascript">
  7.       function getImage()
  8.       {
  9.         var img_text = document.getElementById("inp_img_text").value;
  10.         var img_obj = document.getElementById("img_2_change");
  11.         img_obj.src = "image_change.php?name=" + img_text;
  12.       }
  13.     </script>
  14.   </head>
  15.   <body>
  16.     <form onsubmit="return false;">
  17.       Name: <input type="text" id="inp_img_text" name="name"  />
  18.       <input type="submit" value="Update" onclick="getImage()"; /><br />
  19.       <img src="image_change.php?name=Image%20Text%20Here" id="img_2_change" style="width:200px;height:80px;" alt="Image created by a PHP script" /> 
  20.     </form>
  21.   </body>
  22. </html>
Note: The value "return false;" on the form's onsubmit attribute ensures that the default form action is short circuited and doesn't fire. All we want to do is to change the source attribute (src) of the image; not make a call on a a server page.
Feb 1 '10 #5
That worked perfectly. There's one more step I'm looking for your help on and hopefully this is a minor change. I've added a drop down with 2 options for a background - Teal/Red - instead of the pre-defined color that was there before. I added a var for this value in the JS and added the drop down to the form. I also added the value that was passed to image.php to be defined as $input_bg as you can see below. So I'm looking for the bg to update with the text when I press 'update'. Can you see what is wrong with the bolded text I've added below?

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.       function getImage()
  3.       {
  4.         var img_text = document.getElementById("inp_img_text").value;
  5.         var img_bg = document.getElementById("inp_img_bg").value;
  6.         var img_obj = document.getElementById("btn_img_change");
  7.         img_obj.src = "myimage.php?name=" + img_text + img_bg;
  8.       }
  9.     </script>
  10.   </head>
  12.   <body>
  13.     <form onsubmit="return false;">
  14.       Name: <input type="text" id="inp_img_text" name="name"  />
  15.       Background: <select size="1" id="inp_img_bg" name="background" />
  16.       <option value="template.jpg">Teal</option>
  17.       <option value="semplate.jpg">Red</option>
  18.       </select>
  19.       <input type="submit" value="Update" onclick="getImage()"; />
  20.       <img src="" id="btn_img_change" style="width:200px;height:80px;" alt="Image created by a PHP script" /> 
  21.  </form>
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. $input_bg = $_REQUEST['background'] ;
  3. $my_img = imagecreatefromjpeg( $input_bg);
  4. $background = imagecolorallocate( $my_img, 0, 0, 255 );
  5. $text_colour = imagecolorallocate( $my_img, 255, 255, 0 );
  6. $line_colour = imagecolorallocate( $my_img, 128, 255, 0 );
  7. $input_text = $_REQUEST['name'] ;
Feb 1 '10 #6
250 Expert 100+
Here are the modified files...
(Also, here's a great site I found while searching for hex color values.)

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Untitled Document</title>
  6.     <script type="text/javascript">
  7.       function getImage()
  8.       {
  9.         var inp_text = document.getElementById("inp_img_text");
  10.         var img_bg = document.getElementById("inp_img_bg").value;
  11.         var img_obj = document.getElementById("img_2_change");
  12.         img_obj.src = "image_change.php?name=" + inp_text.value + "&bg=" + img_bg;
  13.         //inp_text.value = ""; // Clear the text box
  14.       }
  15.     </script>
  16.   </head>
  17.   <body>
  18.     <form onsubmit="return false;">
  19.       Name: <input type="text" id="inp_img_text" name="name"  />
  20.       Background: 
  21.       <select size="1" id="inp_img_bg" name="bg" />
  22.         <option value="008080">Teal</option>
  23.         <option value="FF0000">Red</option>
  24.         <option value="FF">Blue</option>
  25.         <option value="FF00">Green</option>
  26.       </select>
  27.       <input type="submit" value="Update" onclick="getImage()"; /><br />
  28.       <img src="image_change.php?name=Image Text Here&bg=0" id="img_2_change" style="width:200px;height:80px;" alt="Image created by a PHP script" /> 
  29.     </form>
  30.   </body>
  31. </html>
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. // Validate & cleanse inputs first..
  3. $input_text = 
  4.   isset($_GET['name']) && strlen($_GET['name']) < 20 
  5.   ? strip_tags($_GET['name']) 
  6.   : NULL;
  8. // initialize variables for: R,G,B, and valid_color check
  9. $r = $g = $b = $is_valid_color = 0;
  11. if ( isset($_GET['bg']) && preg_match('/^[0-9A-F]{1,6}$/i',$_GET['bg']) ) {
  12.   $is_valid_color = hex2rgb($_GET['bg'],$r,$g,$b);
  13.     // Could just set $is_valid_color
  14.     // instead of having the
  15.     // function return a value,
  16.     // but it helps to have a return
  17.     // value when the function (hex2rgb) 
  18.     // gets refactored.
  19. }
  21. // End of validation...
  23. if (!$input_text || !$is_valid_color) {
  24.   exit; // exit if bad values provided
  26.   // Fix to actually send an image with an error message
  27.   // I'll leave that up to you... :D
  28. }
  31. $my_img = imagecreate( 200, 80 );
  32. $background = imagecolorallocate( $my_img, $r, $g, $b);
  33. $text_colour = imagecolorallocate( $my_img, 255, 255, 0 );
  34. $line_colour = imagecolorallocate( $my_img, 128, 255, 0 );
  36. imagestring( $my_img, 4, 30, 25, $input_text, $text_colour );
  37. imagesetthickness ( $my_img, 5 );
  38. imageline( $my_img, 30, 45, 165, 45, $line_colour );
  40. header( "Content-type: image/png" );
  41. imagepng( $my_img );
  42. imagecolordeallocate( $line_color );
  43. imagecolordeallocate( $text_color );
  44. imagecolordeallocate( $background );
  45. imagedestroy( $my_img );
  47. /**
  48.  * Return r,b,g values from hex(string) input
  49.  *
  50.  * @copyright Copyright (c) <February, 1 2010> <Darrell C. Greenhouse>
  51.  * @link http://www.linfo.org/mitlicense.html
  52.  *
  53.  * @param string $hexval The hex value to convert
  54.  * @param int $r The converted rgb values
  55.  * @param int $g ""
  56.  * @param int $b ""
  57.  * @return int|boolean
  58.  */
  59. function hex2rgb($hexval, &$r, &$g, &$b)
  60. {
  61.     // Ensure it's a full 6 nibble hex value
  62.   $hexval = str_pad($hexval, 6, "0", STR_PAD_LEFT);  
  64.   $colors = array("b","g","r"); // Note how they're reversed
  66.   for ($i = 4, $j=0; $i > -1; $i-=2) {
  67.     ${$colors[$j++]} = hexdec(substr($hexval,$i,2));
  68.   }
  69.   return 1;
  70. }
  72. ?>
Feb 1 '10 #7
This is great, thanks. I'm trying to use images as backgrounds instead of RGB colors, I've tried to modify what you've provided but the logic isn't clear to me with the extra code - apologies! - Bg like this for example...

Feb 1 '10 #8
1,044 Expert 1GB
PHP's GD library requires you to make an image resource out of image files. So, you'd simply make a resource out of that image, and copy/merge it into the main resource.
Feb 1 '10 #9
250 Expert 100+
Are you trying to create an image background with an upper and lower differential color region as show in your last post?
Feb 1 '10 #10
As I understand it you can use an image as background template and just write the text to it to create a new image by replacing imagecreate () with imagecreatefromjpeg ( "template.jpg"). I did this with my original code here.

I'm just looking to select one of two backgrounds from a drop down and pass the bg file value to the$background variable in the PHP.

$input_background = $_REQUEST['background'] ;
$my_img = imagecreatefromjpeg( $_REQUEST['background']);

There is a brief outline of this capability here under Modifying an Existing Image.
Feb 1 '10 #11
250 Expert 100+
Update!: Try also using the imagettftext or the imagechar functions...
It'll probably save you a lot of time versus using that which I describe at the bottom of this post..

================================================== =============


I got your private message...

I've thought about your issue, but I haven't had the time to really write anything up...
I've been really swamped and still am...

I also for the 1st time suffered a "Trojan" after 32 years in the computer industry!

I've finally been christened! Yippee! :D

I'm really surprised that I'm not depressed over it... Slowed me down to smell the roses...

Criminal hackers should be dragged through the streets like Mussolini!

It's my understanding that you want to use an existing background image that's selected from the drop-down, so you'll probably need to use PHP's imagecopymerge command in your script to merge two images into one.

1- Generate image from text
2- Pass into the imagecopymerge function as parameters the generated image resource, a resource based on the background image, the coordinates of where to place the background image in the merged image, the coordinates in the background image to copy over, and the source width & height values of the background image

It'll still be a day or so before I can really get to this, but if you play around with the concepts above, you might figure it out before then...
(Which of course would be the most satisfying, rewarding, and educational experience.)

All the best
Feb 3 '10 #12
I wasn't sure why I required imagecopymerge when you can write text to a background image using imagecreatefromjpeg. Anyway I tried again to pass the background value based on dropdown selection and it worked fine. See here. Do you see any problems doing it this way?

One of the last issues I've faced is using imagettftext to write a particular font to the image, and trust me it's not through lack of effort.

My host supports freetype and it's compiled with 4.4.9.
'../configure' '--with-pear=/usr/lib/php' '--prefix=/usr' '--with-mysql=/usr/' '--with-zlib' '--enable-debug=no' '--enable-safe-mode=no' '--enable-discard-path=no' '--with-gd' '--with-png-dir' '--enable-track-vars' '--with-db' '--with-gdbm' '--enable-force-cgi-redirect' '--with-ttf' '--enable-ftp' '--with-mcrypt' '--enable-dbase' '--enable-memory-limit' '--enable-calendar' '--enable-wddx' '--with-jpeg-dir' '--enable-bcmath' '--enable-gd-imgstrttf' '--enable-shmop' '--enable-mhash' '--with-mhash' '--with-openssl' '--enable-xslt' '--with-xslt-sablot' '--with-dom' '--with-dom-xslt' '--with-dom-exslt' '--with-imap' '--with-curl' '--with-iconv' '--with-freetype-dir' '--with-bz2' '--with-gettext' '--enable-exif' '--with-idn' '--enable-mbstring=all' '--with-kerberos' '--with-imap-ssl' '--with-sqlite' '--with-zip'

I changed my FTP settings to upload text files as ASCII instead of binary and tried it with a number of basic ttfs in the same folder but still did not work.
I added this to my PHP file, with all variables assigned a value:
$font = 'arial.ttf';
imagettftext ($my_img, 10, 15, 30, 40, $txt_colour, $font, $input_text);
Also tried it with:
putenv('GDFONTPATH=' . realpath('.'));
$font = 'arial.ttf';
I even tried using the imagefttext function but to no avail. It just generates an image with no text at all. I can't find any other method of troubleshooting this issue, so anything that I haven't tried here....??
Feb 4 '10 #13
6,050 Expert 4TB
The problem may be that your switch for freetype does not point to the directory containing the freetype library.
Feb 4 '10 #14
I spoke with my web host (1and1) and they assured me that, providing my code was correct and the font was uploaded to the folder my script was running from, it should work. I'm truly stumped on this one...
Feb 8 '10 #15

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Useko Netsumi | last post by:
Hi, I'm trying to experiment with the GD2 library(or GD for that matter) for win32 platform BUT could not find any that support it. Could you tell me where to find the binary of it? Thanks.
by: Uncle_Alias | last post by:
I would like use some of the GD image functions, so I ran a couple of short scripts to see if it worked, such as: <?php /* Create a red square */ $image = imagecreate(200, 200); $colorRed =...
by: ggg | last post by:
I had not enabled GD yet, so I reconfigured and recompiled my PHP like so: ./configure --with-apxs=/www/bin/apxs --with-zlib --width-gd make make install I restarted apache, and tested out...
by: Moluske | last post by:
The web site was on another server i switch to a new one but this server hav now PHP Safe Mode to ON so i get error when creating thumbnail. I cant put PHP Safe mode to OFF. is ther any thing i...
by: nathan.fulton | last post by:
Hey all, I'm having issues with a script. When loaded, it should grab data from a database, add 1 to the visits counter and then display the count in the form of an image. The problem is this:...
by: Grumps | last post by:
I am already having a imagecreate script for preview. Im trying to alter the imagecreate to get to the next line if it reaches near the next end of the width limit. For example: Width: 100px...
by: saikiran.iitkgp | last post by:
Hi All, I have the php version 5.2.2 . When I am using " $im = imagecreate(......); " I am getting the following message "Fatal error: Call to undefined function imagecreate() in...
by: lwo3108 | last post by:
Hi I am using PHP 4.3.1 and i have written a little code for purpose of CAPTCHA Image. i am running this code locally on localhost using IIS 5.0. When i open the code page, i get an fatal...
by: gerrymcc | last post by:
Hello, I've managed to get as far as using some of the GD2 drawing functions included in the php_gd2.dll. I can't figure out how to put HTML and PHP output on the same browser page, no doubt this...
by: vikjohn | last post by:
I have a new perl script sent to me which is a revision of the one I am currently running. The permissions are the same on each, the paths are correct but I am getting the infamous : The specified...
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and efficiency. While initially associated with cryptocurrencies...
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was proposed, which integrated multiple engines and...
by: Carina712 | last post by:
Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand. Background colors can be used to highlight important...
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...
by: Rahul1995seven | last post by:
Introduction: In the realm of programming languages, Python has emerged as a powerhouse. With its simplicity, versatility, and robustness, Python has gained popularity among beginners and experts...
by: Johno34 | last post by:
I have this click event on my form. It speaks to a Datasheet Subform Private Sub Command260_Click() Dim r As DAO.Recordset Set r = Form_frmABCD.Form.RecordsetClone r.MoveFirst Do If...
by: ezappsrUS | last post by:
Hi, I wonder if someone knows where I am going wrong below. I have a continuous form and two labels where only one would be visible depending on the checkbox being checked or not. Below is the...
by: DizelArs | last post by:
Hi all) Faced with a problem, element.click() event doesn't work in Safari browser. Tried various tricks like emulating touch event through a function: let clickEvent = new Event('click', {...
by: F22F35 | last post by:
I am a newbie to Access (most programming for that matter). I need help in creating an Access database that keeps the history of each user in a database. For example, a user might have lesson 1 sent...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.