0

我正在使用 PHP 在图像上写入文本。我很容易从当前图像创建新图像并使用 PHP 在其上写入文本。但我也希望当我单击 Apply Changes 然后将此新图像移动到我的目录（move_uploaded_file）并替换新图像和新图像名称的当前图像必须与以前的图像相同，因为我正在使用 PHP 下载它。

这是我用来在上面写文本的代码。

HTML 代码： 

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

先谢谢了！

4

2 回答 2

1

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

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.

另一种方式

如果要保留原始图像和“带字幕”图像，则需要创建一个新文件，并因此输出新名称，以便 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);
    }

（在页面中，如果您想重新为已添加字幕的图像添加字幕，则可能需要更新其他字段）。

于 2013-05-21T11:09:04.720 回答
0

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

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

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

于 2013-05-21T10:29:59.407 回答