gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:12:43 26 4
gpt4 key购买 nike

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

最佳答案

阿波克里福斯,

这里没有“表格”,这是第一页

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

关于javascript - 如何在裁剪时防止浏览器图像缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36066344/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com