Question

我在bootstrap模态中使用了fengyuanchen / cropper v0.9.2进行图像裁剪和旋转。它适用于裁剪和旋转，但问题是它在裁剪后以模态保存第一张图像，假设我已经以模态打开图像，裁剪它，保存它（从服务器）并关闭模态。然后，如果我再次打开图像，但它显示旧图像而不是裁剪的图像。但是，如果我重新加载页面，那么它将显示裁剪的页面。下面是我使用过的一些代码。

 $(document).on('click', '.original_image_show', function() { //click on the image 
var data_original = $(this).find('img').attr('data-original');/ //get the src to to crop
 // #originalImageShow is the modal div's id.
$("#originalImageShow").find(".bootstrap-modal-cropper img").attr('src', data_original); //set the src of bootstrap modal from clicked image's src.


var $image = $('.bootstrap-modal-cropper > img');
$('#originalImageShow').on('shown.bs.modal', function() {
      //-----cropping code here-----
        }).on('hidden.bs.modal', function() {
    $image.cropper('destroy');//I have used this code to destroy the modal.
 });

任何帮助？

Answer 1

我遇到了问题，这是用于缓存图像。当我首先点击图像时，浏览器会缓存图像，然后它会显示缓存中的旧图像而不是裁剪的图像。

var data_original = $(this).find('img').attr('data-original');/ //get the src to to crop
var data_original = data_original+ '?'+Math.random()*Math.random();
 // #originalImageShow is the modal div's id.
$("#originalImageShow").find(".bootstrap-modal-cropper img").attr('src', data_original); //set the src of bootstrap modal from clicked image's src.

通过添加“'？'+ Math.random（）* Math.random（）”与图像的src解决了缓存问题。

在bootstrap模式中没有页面重新加载时，fengyuanchen cropper没有显示裁剪的图像。它保存了第一张图片

1 个答案: