如果不以自举模式重装页面，则fengyuanchen裁剪机不会显示裁剪后的图像。 保存第一个图像

Question

我已使用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.

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