如何防止裁剪时浏览器图像缓存


How to prevent browser image caching when cropping

我正在使用裁剪来修改图像,我需要名称在某种程度上特定于帐号。然后我这样做,它消除了随机性,留下的图像是缓存的图像。有没有办法防止这种情况?

// 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);

apokryfos,

这里

没有"形式",这是第一页

        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 -->