從@imagecreatefromjpeg獲得<img>標記？

Question

我正在使用PHP寫圖片上的圖片。我很容易從當前圖片創建新圖片並使用PHP寫文本。但我也希望當我點擊應用更改時，將這個新圖片移動到我的目錄（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; 
    } 
?> 

在先進的感謝！

Answer 1

我會發送一個XMLHttpRequest（AJAX）與jQuery，因爲​​ 不保存。用戶可以返回瀏覽器歷史記錄並再次訪問該網站。

另外，我認爲你沒有改變文件名。 move_uploaded_file($im,"upload_pic/angelina.jpg");

小提示：不要在函數之前使用@運算符！這是一個性能殺手。

Answer 2

您想要在更改時重新加載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); 
    } 

（在頁面中，您可能需要更新等領域，如果你想重新標題已標題圖像）。