javascript - 旋转的图像无法在 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。

标签： javascriptphpimagegoogle-chromerotation

javascript - 旋转的图像无法在 Google Chrome 浏览器中正确显示

问题描述

解决方案

推荐阅读