php - get <img> tag from @imagecreatefromjpeg? -

i writing text on image using php.i creating new image current image , writing text on using php.but want when click on apply changes move new image directory (move_uploaded_file) , replace current image new image , new image name must same of previous image because downloading using php.

here code using wrote text on it.

html code :

     <img id="image" src="<?php echo "upload_pic/" . $_files["image_file"]["name"]; ?>" alt="your_image" />         <input type="button" name="save_image" id="save_image" value="save image" /> <input type="hidden" id="hidden_image_name" name="hidden_image_name" value="<?php echo $_files["image_file"]["name"]; ?>" /> 

jquery code :

jquery('#save_image').click(function(){         var image_name = jquery('#hidden_image_name').val();         jquery.ajax({         url:'text_image.php',         data:'file='+image_name,         type:'get',         success:function(data){             alert(data);         }     });     }); 

text_image.php

<?php  $file = 'upload_pic/'.$_get['file'];  /*** set header image ***/     header("content-type: image/jpeg");      /*** specify image , text ***/     $im = writetoimage($file, 'phpro rules again');     //echo $im;     /*** spit image out other end ***/     imagejpeg($im);      /**      *      * @write text existing image      *      * @author kevin waterson      *      * @access public      *      * @param string image path      *      * @param string text string      *      * @return resource      *      */     function writetoimage($imagefile, $text){     /*** make sure file exists ***/     if(file_exists($imagefile))         {             /*** create image ***/         $im = @imagecreatefromjpeg($imagefile);          /*** create text color ***/         $text_color = imagecolorallocate($im, 233, 14, 91);          /*** splatter image text ***/         imagestring($im, 6, 25, 150,  "$text", $text_color);         }     else         {         /*** if file not exist create our own image ***/         /*** create black image ***/         $im  = imagecreatetruecolor(150, 30); /* create black image */          /*** background color ***/         $bgc = imagecolorallocate($im, 255, 255, 255);          /*** text color ***/         $tc  = imagecolorallocate($im, 0, 0, 0);          /*** little rectangle ***/         imagefilledrectangle($im, 0, 0, 150, 30, $bgc);          /*** output , error message ***/         imagestring($im, 1, 5, 5, "error loading $imagefile", $tc);         }      return $im;     } ?> 

thanks in advanced!

you want reload img source upon change. need replace src= value of img tag, adding dummy query avoid caching:

jquery('#save_image').click(function(){     var image_name = jquery('#hidden_image_name').val();     jquery.ajax({     url:'text_image.php',     data:'file='+image_name,     type:'get',     success:function(data){         jquery('#image').attr('src', jquery('#image')             .attr('src')+'?'+math.random());     } }); }); 

the php script needs output nothing, rewrite image file

<?php      $file = 'upload_pic/'.$_get['file'];     $im = writetoimage($file, 'phpro rules again');      imagejpeg($im, $file, 95); // 95% quality      die();      ... ?> 

you may want output json stating 'success' or 'failure', though, in case.

you want check $_get['file'] valid, accessible, allowed, image. example might force file basename:

    $file = 'upload_pic/'.basename($_get['file']);     if (!file_exists($file))          // ...no such file...     if (false === getimagesize($file))          // ...doesn't image...     // etc. 

another way

if want keep both original , 'captioned' image, need create new file, , therefore output new name jquery can replace src attribute.

for example:

    $new = 'upload_pic/'.uniqid().'.jpg';      ...create file , put $im it, above...      header('content-type: application/json;charset=utf8');     die(json_serialize(array("src" => $new)));     // or if don't want json_serialize (but $new may contain printable ascii-7 characters need no escaping. "[a-z][0-9]-_." if want sure).     die("{\"src\":\"{$new}\"}"); 

in jquery, data contain $new, so:

    success:function(data){         jquery('#image').attr('src', data.src);     } 

(in page, may need update other fields if want re-caption already-captioned image).