如何在裁剪時防止瀏覽器圖像緩存

我正在使用croppic修改圖像，我需要該名稱對於某個帳號有些特定。然後我這樣做，它帶走了隨機性，剩下的圖像是一個緩存的圖像。有沒有辦法阻止這種情況？如何在裁剪時防止瀏覽器圖像緩存

// THE FIRST $output_filename WORKS GREAT BUT LEAVES NUMBEROUS UNUSED IMAGES IN SYSTEM 
// $output_filename = "busImage/".$busID."_".rand(); 

$output_filename = "busImage/".$busID."_1";

我試過$response=filemtime($response);它裁剪圖像並保存，但不會返回新的圖像，上傳的圖片仍然存在。

$busID = 5; // set up it will change based on accounts 

$imgUrl = $_POST['imgUrl']; 
// original sizes 
$imgInitW = $_POST['imgInitW']; 
$imgInitH = $_POST['imgInitH']; 
// resized sizes 
$imgW = $_POST['imgW']; 
$imgH = $_POST['imgH']; 
// offsets 
$imgY1 = $_POST['imgY1']; 
$imgX1 = $_POST['imgX1']; 
// crop box 
$cropW = $_POST['cropW']; 
$cropH = $_POST['cropH']; 
// rotation angle 
$angle = $_POST['rotation']; 

$jpeg_quality = 100; 

// THE FIRST $output_filename WORKS GREAT BUT LEAVES NUMBEROUS UNUSED IMAGES IN SYSTEM 
// $output_filename = "busImage/".$busID."_".rand(); 

$output_filename = "busImage/".$busID."_1"; 


$what = getimagesize($imgUrl); 

switch(strtolower($what['mime'])) 
{ 
    case 'image/png': 
     $img_r = imagecreatefrompng($imgUrl); 
     $source_image = imagecreatefrompng($imgUrl); 
     $type = '.png'; 
     break; 
    case 'image/jpeg': 
     $img_r = imagecreatefromjpeg($imgUrl); 
     $source_image = imagecreatefromjpeg($imgUrl); 
     error_log("jpg"); 
     $type = '.jpeg'; 
     break; 
    case 'image/gif': 
     $img_r = imagecreatefromgif($imgUrl); 
     $source_image = imagecreatefromgif($imgUrl); 
     $type = '.gif'; 
     break; 
    default: die('image type not supported'); 
} 


//Check write Access to Directory 

if(!is_writable(dirname($output_filename))){ 
    $response = Array(
     "status" => 'error', 
     "message" => 'Can`t write cropped File' 
    ); 
}else{ 

    // resize the original image to size of editor 
    $resizedImage = imagecreatetruecolor($imgW, $imgH); 
    imagecopyresampled($resizedImage, $source_image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH); 

    // rotate the rezized image 
    $rotated_image = imagerotate($resizedImage, -$angle, 0); 

    // find new width & height of rotated image 
    $rotated_width = imagesx($rotated_image); 
    $rotated_height = imagesy($rotated_image); 

    // diff between rotated & original sizes 
    $dx = $rotated_width - $imgW; 
    $dy = $rotated_height - $imgH; 

    // crop rotated image to fit into original rezized rectangle 
    $cropped_rotated_image = imagecreatetruecolor($imgW, $imgH); 
    imagecolortransparent($cropped_rotated_image, imagecolorallocate($cropped_rotated_image, 0, 0, 0)); 
    imagecopyresampled($cropped_rotated_image, $rotated_image, 0, 0, $dx/2, $dy/2, $imgW, $imgH, $imgW, $imgH); 

    // crop image into selected area 
    $final_image = imagecreatetruecolor($cropW, $cropH); 
    imagecolortransparent($final_image, imagecolorallocate($final_image, 0, 0, 0)); 
    imagecopyresampled($final_image, $cropped_rotated_image, 0, 0, $imgX1, $imgY1, $cropW, $cropH, $cropW, $cropH); 

    // finally output png image 
    imagejpeg($final_image, $output_filename.$type, $jpeg_quality); 

    $response = Array(
     "status" => 'success', 
     "url" => $output_filename.$type 
    ); 

$response=filemtime($response); 

print json_encode($response);

來源

2016-03-17 harkly

它可能更容易修改表單（或任何發送這些post參數的內容）並具有

還有很多其他變量可能會影響瀏覽器是否緩存請求。例如，除非您調用（jQuery）'$ .ajaxSetup（{cache：false}）'，否則IE11將緩存AJAX請求並說謊HTTP狀態。 – amphetamachine

apokryfos，

沒有「形式」這一這裏是第1頁

 var croppicHeaderOptions = { 
      cropData:{ 
       "dummyData":1, 
       "dummyData2":"asdas" 
      }, 
      cropUrl:'img_crop_to_file.php', 
      customUploadButtonId:'cropContainerHeaderButton', 
      modal:false, 
      processInline:true, 
      loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ', 
      onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') }, 
      onAfterImgUpload: function(){ console.log('onAfterImgUpload') }, 
      onImgDrag: function(){ console.log('onImgDrag') }, 
      onImgZoom: function(){ console.log('onImgZoom') }, 
      onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') }, 
      onAfterImgCrop:function(){ console.log('onAfterImgCrop') }, 
      onReset:function(){ console.log('onReset') }, 
      onError:function(errormessage){ console.log('onError:'+errormessage) } 
    } 
    var croppic = new Croppic('croppic', croppicHeaderOptions);

，這是HTML

 <div class="container"> 
     <div class="row"> 
      <div class="col-lg-6"> 
       <!-- <img class="logoImg" src="assets/img/logo.png" /> --> 

       <span class="logoHeader">croppic</span> 
       <h2>is an image cropping jquery plugin that will satisfy your needs and much more</h2> 

       <a href="#" class="downloadButton" >download <sup>v1.0.1</sup></a> 

      </div><!-- /col-lg-6 --> 
      <div class="col-lg-6 cropHeaderWrapper"> 
       <div id="croppic"></div> 
       <span class="btn" id="cropContainerHeaderButton">click here to try it</span> 
      </div><!-- /col-lg-6 --> 

     </div><!-- /row -->   
    </div><!-- /container -->

來源

2016-03-17 17:08:59 harkly

如何在裁剪時防止瀏覽器圖像緩存

回答

相關問題