另一种方式

Question

我正在使用PHP在图像上编写文本。我可以使用PHP轻松地从当前图像创建新图像并在其上写文本。但是，当我单击Apply Changes时，我也想要将此新图像移动到我的目录（move_uploaded_file））并用新图像替换当前图像，新图像名称必须与上一图像相同，因为我使用PHP下载它。

这是我用来在其上写文字的代码。

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代码：

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;
    }
?>

感谢高级！

Answer 1

您想要在更改时重新加载IMG源。因此，您需要做的是通过添加虚拟查询来替换IMG标记的SRC=值以避免缓存：

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());
    }
});
});

PHP脚本无需输出任何内容，只需重写图像文件

<?php

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

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

    die();

    ...
?>

您可能希望输出一个JSON，说明“成功”或“失败”，以防万一。

您还想检查$_GET['file']是否是有效的，可访问的，允许的图像。例如，您可以强制该文件为基本名称：

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

另一种方式

如果要同时保留原始图像和“标题”图像，则需要create a new file，因此输出新名称，以便jQuery可以替换SRC属性。

例如：

    $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}\"}");

在jQuery中，data现在将包含$new，所以：

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

（在页面中，如果您想重新标题已经标题的图片，则可能需要更新其他字段。）

Answer 2

我会用jQuery发送XMLHttpRequest（AJAX），因为window.location.href='text_image.php?file='+image_name; 不是保存。用户可以返回浏览器历史记录并再次访问此站点。

另外我认为您还没有更改文件名。 move_uploaded_file($im,"upload_pic/angelina.jpg");

小提示：在功能之前不要使用@运算符！这是一个性能杀手。

从@imagecreatefromjpeg获取<img/>标签？

2 个答案:

另一种方式