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

时间:2016-03-17 16:26:21

标签: javascript php

我正在使用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);

1 个答案:

答案 0 :(得分:1)

apokryfos,

这里没有“形式”是第1页

  User Load (1.7ms)  SELECT "users".* FROM "users"
=> #<ActiveRecord::Relation [#<User id: 3, email: "mail@mail.com", encrypted_password: "$2a$10$/oH53eNleU4rc87OSYVtsANt...", reset_password_token: nil, reset_password_sent_at: nil, remember_created_at: nil, sign_in_count: 1, current_sign_in_at: "2016-03-17 11:10:39", last_sign_in_at: "2016-03-17 11:10:39", current_sign_in_ip: "::1", last_sign_in_ip: "::1", created_at: "2016-03-17 11:10:39", updated_at: "2016-03-17 11:10:39", avatar_file_name: nil, avatar_content_type: nil, avatar_file_size: nil, avatar_updated_at: nil>]>

这是html

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