Question

我正在创建一个用户可以上传图库图片的页面。选择图像后，我想显示模态弹出窗口并允许用户选择缩略图。我正在使用jWindowCrop。缩略图应对应于图像的宽高比，因此缩略图尺寸是动态计算的。

我已设法完成所有这些工作，如fiddle中所示。

    $("input").change(function(e) {
      var reader = new FileReader();
      reader.onload = function(e1) {
        var img = new Image;
        img.onload = function() {
          $('#target').attr('src', e1.target.result);
          $('#myModal').on('shown.bs.modal', function() {
            var $actualImageHeight = img.height;
            var $actualImageWidth = img.width;
            var aspectRatio = $actualImageWidth / $actualImageHeight;
            var thumbnailWidth = 300;
            var thumbnailHeight = thumbnailWidth / aspectRatio;
            var jwc = $('#target').getjWindowCrop();
            if (jwc != null) {
              jwc.destroy();
            }
            $('#target').jWindowCrop({
              targetWidth: thumbnailWidth,
              targetHeight: thumbnailHeight,
              loadingText: 'hello world',
              onChange: function(result) {
                $('#crop_x').text(result.cropX);
                $('#crop_y').text(result.cropY);
                $('#crop_w').text(result.cropW);
                $('#crop_h').text(result.cropH);
              }
            });
          }).modal('show');
        };
        img.src = reader.result;
      };
      reader.readAsDataURL(e.originalEvent.target.files[0]);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <div class="row">
        <div id="fileContainer" class="col-md-8">
          <input type="file" />
        </div>
      </div>
    </div>
    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModal-label">Modal title</h4>
          </div>
          <div class="modal-body">
            <img id="target" alt="Source" />
    
            <div id="results">
              <b>X</b>: <span id="crop_x"></span>
              <br />
              <b>Y</b>: <span id="crop_y"></span>
              <br />
              <b>W</b>: <span id="crop_w"></span>
              <br />
              <b>H</b>: <span id="crop_h"></span>
              <br />
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </div>

我面临的问题是首先加载实际图像，然后在该图像上调用jWindowCrop（），将其大小调整为缩略图大小，但每次都有闪烁。我尝试在图片load()事件上执行此操作，但由于某种原因，图片尺寸为零。我也尝试在模态show()事件中执行此操作，并且我也获得了正确的图像尺寸，但jWindowCrop无法加载图像。我也没有在控制台日志中出现任何错误。我很困惑为什么会这样。

我能够让它正常工作的唯一方法是在模态shown()事件中，但这会导致闪烁。我需要用户只看到jWindowCrop缩略图选择框而没有任何闪烁。我怎么能这样做？

我面临的另一个问题是，一旦用户选择图像，然后关闭模态并选择另一个图像，缩略图框将保留先前图像的尺寸，然后再调整到当前图像缩略图尺寸。但我想如果我的第一个问题得到解决，那也是如此。

在打开模态之前动态处理和加载图像以防止闪烁

0 个答案: