如何解决旋转的图像在 Google Chrome 浏览器中无法正确显示
客户端编辑部分有一个图像列表,每个图像旁边有2个操作按钮(删除和旋转),如下图所示。所以问题是当我旋转图像时,页面刷新,图像旋转,但角度改变的图像没有以正确的角度显示。正确显示图像的唯一方法是硬刷新浏览器。此问题仅与 Chrome 浏览器有关。它在其他浏览器上运行良好。
这是我管理轮换的方式。
HTML(我尝试在图片 url 旁边使用时间戳,但没有用)
@if(!empty($images[0]))
<section class="panel">
<header class="panel-heading panel-align">
<h2 class="panel-title">Images</h2>
</header>
<div class="panel-body">
@foreach($images as $img)
<div class="col-sm-2" style="overflow: auto;">
<div class="popup-gallery">
<!-- edit timestamp is glued to link because chrome is caching images and rotated images are not shown. -->
<a class="pull-left mb-xs mr-xs" href="{{$img->image_url.'?'.filemtime(ltrim($img->image_url,'/'))}}" title="Images" rel="group1">
<div class="img-responsive">
<img src="{{$img->image_url}}" width="105">
</div>
</a>
</div>
<div class="btn-group">
<a href="#deleteImageModal" class="modal-basic mb-xs mt-xs mr-xs btn btn-danger btn-delete-image" imageId="{{$img->id}}"><i class="fa fa-trash-o"></i></a>
<button type="button" class="mb-xs mt-xs mr-xs btn btn-info btn-rotate-image" imageId="{{$img->id}}" data-param="montage"><i class="fa fa-rotate-right"></i></button>
</div>
</div>
@endforeach
</div>
</section>
@endif
Javascript
$(document).ready(function(){
$('.btn-rotate-image').click(function(){
var id = $(this).attr('imageId');
var param = $(this).data('param');
$.ajax({
method : 'GET',cache : false,url : '/image/rotation',data : {
'id' : id,'param' : param
},success : function(){
document.location.reload();
}
});
});
});
PHP
public function image_rotation(Request $request){
$id = $request->input('id');
$param = $request->input('param');
$imageModel = new Images();
$url = ltrim($imageModel->get_image_url($id,$param),'/');
$sourceImg = imagecreatefromjpeg($url);
$rotated = imagerotate($sourceImg,-90,0);
imagejpeg($rotated,$url,100);
}
代码正在工作,它旋转图像,但在 document.location.reload(); 之后; Chrome 浏览器未以正确的角度显示图像。如果使用 F5、ctrl+R 刷新页面,则无法正确显示,它仅适用于硬刷新 ctrl+shift+R。
解决方法
通过将这些代码行添加到控制器中,防止页面缓存解决了该问题。
$ts = gmdate("D,d M Y H:i:s") . " GMT";
header("Expires: $ts");
header("Last-Modified: $ts");
header("Pragma: no-cache");
header("Cache-Control: no-cache,must-revalidate");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。