473,728 Members | 1,612 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Need GD Library Imagecreate to display on same page

13 New Member
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 4817
250 Recognized Expert Contributor
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
13 New Member
Thanks for the prompt response. How can I modify the PHP output file to target an iframe?
Jan 31 '10 #3
1,044 Recognized Expert Top Contributor
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 Recognized Expert Contributor
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
13 New Member
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 Recognized Expert Contributor
Here are the modified files...
(Also, here's a great site I found while searching for hex color values.)

image_change.ht ml
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>
image_change.ph p
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
13 New Member
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 Recognized Expert Top Contributor
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 Recognized Expert Contributor
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

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 = imagecolorallocate($image, 255, 0, 0); imagefill($image, 0, 0, $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 some GD-related functions and it works fine:
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 can do so it will be able to create the thumbnail again ? site: www.jfl-media.com Thanks J-F her is the script:
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: when the script loads, instead of adding 1 count to the database, it ads anywhere from 2 to 4 counts to the database. I was wondring is anyone knows whats going on or how to fix it. I have attached my code below. Thanks!
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 Height: 200px Please follow these guidelines when posting questions. Submitting clear and concise questions allows those reading to understand your problem and respond easily. Everything is written in a single line but how do i enable a <br> within...
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 C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\server.php on line
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 error like: Here is my code "
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 has something to do with the header; any help would be greatly appreciated. Thank you, Gerard <?php header ("Content-type: image/png");
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 CGI application misbehaved by not returning a complete set of HTTP headers. The scripts are very long but here are the opening statements: The One that works .... #!C:\Perl\bin\perl.exe # openresolver.cgi # # OpenResolver - a CGI script for...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.