得到 <img> 来自@imagecreatefromjpeg的标签？

Question

I am writing text over image using PHP.I am easily creating new image from current image and writing text over it using PHP.But I also want that when I click on Apply Changes then move this new image to my directory (move_uploaded_file) and replace the current image with the new image and new image name must be the same of the previous image because I am downloading it using PHP.

Here is my code which I am using to wrote text over 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 the header for the image ***/
    header("Content-type: image/jpeg");

    /*** specify an image and text ***/
    $im = writeToImage($file, 'PHPRO rules again');
    //echo $im;
    /*** spit the image out the other end ***/
    imagejpeg($im);

    /**
     *
     * @Write text to an existing image
     *
     * @Author Kevin Waterson
     *
     * @access public
     *
     * @param string The image path
     *
     * @param string The text string
     *
     * @return resource
     *
     */
    function writeToImage($imagefile, $text){
    /*** make sure the file exists ***/
    if(file_exists($imagefile))
        {    
        /*** create image ***/
        $im = @imagecreatefromjpeg($imagefile);

        /*** create the text color ***/
        $text_color = imagecolorallocate($im, 233, 14, 91);

        /*** splatter the image with text ***/
        imagestring($im, 6, 25, 150,  "$text", $text_color);
        }
    else
        {
        /*** if the file does not exist we will create our own image ***/
        /*** Create a black image ***/
        $im  = imagecreatetruecolor(150, 30); /* Create a black image */

        /*** the background color ***/
        $bgc = imagecolorallocate($im, 255, 255, 255);

        /*** the text color ***/
        $tc  = imagecolorallocate($im, 0, 0, 0);

        /*** a little rectangle ***/
        imagefilledrectangle($im, 0, 0, 150, 30, $bgc);

        /*** output and error message ***/
        imagestring($im, 1, 5, 5, "Error loading $imagefile", $tc);
        }

    return $im;
    }
?>

Thanks in Advanced!

Answer 1

You want to reload the IMG source upon change. So what you need to do is to replace the SRC= value of the IMG tag, by adding a dummy query to 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, just rewrite the image file

<?php

    $file = 'upload_pic/'.$_GET['file'];
    $im = writeToImage($file, 'PHPRO rules again');

    imageJPEG($im, $file, 95); // 95% quality

    die();

    ...
?>

You may want to output a JSON stating 'success' or 'failure', though, just in case.

You also want to check that $_GET['file'] is a valid, accessible, allowed, image. For example you might force the file to be a basename:

    $file = 'upload_pic/'.basename($_GET['file']);
    if (!file_exists($file))
         // ...no such file...
    if (false === getImageSize($file))
         // ...doesn't look like an image...
    // etc.

Another way

If you want to keep both original and 'captioned' image, you need to create a new file , and therefore output the new name so that jQuery can replace the SRC attribute.

For example:

    $new = 'upload_pic/'.uniqid().'.jpg';

    ...create the file and put $im into it, as above...

    Header('Content-Type: application/json;charset=utf8');
    die(json_serialize(array("src" => $new)));
    // Or if you don't want json_serialize (BUT THEN $new may only contain printable ASCII-7 characters that need no escaping. "[a-z][0-9]-_." if you want to be sure).
    die("{\"src\":\"{$new}\"}");

in jQuery, data will now contain $new , so:

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

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

Answer 2

I would send a XMLHttpRequest (AJAX) with jQuery, because window.location.href='text_image.php?file='+image_name; isn't save. The user could go back in the browser history and visit this site again.

Also I think you haven't change the file name. move_uploaded_file($im,"upload_pic/angelina.jpg");

A small tip: Don't use the @ operator before functions! It's a performance killer.