Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unable to Update GD Image Within A Webpage

    Hi,
    I am having trouble updating/refreshing an image that I have created in GD. I have created a GD image (draw.php) and another php file to display this image as part of a webpage. Then based on where a user clicks on the initial image, I am using the POST action to capture the coordinates (using input type=image) and want to draw a circle at that location.

    The circle is only drawn successfully if I set my draw.php file as the action for the abc.php file, but this will take me to a page with only the image (instead, I want the image to update as part of the webpage). I have tried adding a javascript function to append a timestamp to force a refresh of the image, but that has not worked.

    abc.php
    Code:
    <html>
    <body>
    <script type="text/javascript">
    
    function reloadImg(id) {
       var obj = document.getElementById(id);
       var src = obj.src;
       var pos = src.indexOf('?');
       if (pos >= 0) {
          src = src.substr(0, pos);
       }
       var date = new Date();
       obj.src = src + '?v=' + date.getTime();
       return false;
    }
    
    </script>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="image" src="draw.php" name="ice" id="myIce" onclick="return reloadImg('myIce');" />
    </form>
    
    </body>
    </html>
    Draw.php:
    Code:
    <?php
    header ("Content-type: image/jpeg");
    $xx1=$_POST['ice_x'];
    $yy1=$_POST['ice_y'];
    
    ...............................creating the Image here
    
    // Drawing circle based on user coordinates
    ImageFilledArc($im,$xx1,$yy1,25,25,0,360,$text_color,IMG_ARC_PIE);
    
    ImageJpeg ($im);
    imagedestroy($im);
    ?>

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,493
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    This was the best I could come up with.
    It uses the built-in coordinates from a <form> image control.

    Here is my test page:
    http://www.catpin.com/draw

    EDIT: I switched from SESSION to cookies.
    The only problem I see now, it an occasional submit message
    until the image is cached.

    This is the index.php script:
    PHP Code:
    <html>
    <head>

    </head>
    <body>

    <?=$_COOKIE['xx1']?> <?=$_COOKIE['yy1']?>
    <br />

    <form action="position.php" method="POST">
        <input type="image" src="draw.php?xx=<?=$_COOKIE['xx1']?>&yy=<?=$_COOKIE['yy1']?>" name="ice" />
    </form>

    </body>
    </html>
    This is the draw.php script:
    PHP Code:
    <?php

    $xx1
    =$_GET['xx'];
    $yy1=$_GET['yy'];

    header ("Content-type: image/jpeg");

    $filename="city.jpg";
    $im imagecreatefromjpeg($filename);

    $white imagecolorallocate($im0xFF0xFF0xFF);

    // Drawing circle based on user coordinates
    ImageFilledArc($im,$xx1,$yy1,25,25,0,360,$white,IMG_ARC_PIE);

    ImageJpeg ($im);
    imagedestroy($im);
    ?>

    This is the "position.php" script that makes the cookie ...
    It takes care of the extra header needed.
    PHP Code:
    <?php
    setcookie
    ("xx1"$_POST['ice_x']);
    setcookie("yy1"$_POST['ice_y']);
    header ("location: index.php");
    ?>



    .
    Last edited by mlseim; 12-03-2010 at 06:21 PM.

  • Users who have thanked mlseim for this post:

    busdriver99 (12-07-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •