Bootstrap模态iMvareAselect隐藏选定的区域后，模态关闭后

Question

im试图使用Imgareaselect插件进行切割图像，但我有问题。

如果我在那里打开模态打开图像，则我会看到预览图像，然后选择区域，并且在模态按钮中有什么关闭Bootstrap Modal，但它不会隐藏选定的区域。

它必须隐藏选定的区域，然后我有图像名称，如果我单击上传，则必须上传图像我选择的内容。

目前，它上传了我剪切的图像，但是如果我关闭模式并且在现场不好，则可以选择区域。

我的模态代码：

<div class="col-sm-3"><button type="button" class="btn btn-info btn-lg" id="press">Cut image</button></div>
<div id="popup" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content" style="display:inline-block;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Cut image</h4>
      </div>
      <div class="modal-body">
        <input name="bgimg" id="fileInput" size="30" type="file" />
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <p><img id="filePreview" style="display:none;"/></p>
        <div style="clear: both;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="closemodal" data-dismiss="modal">Go add information</button>
      </div>
    </div>
  </div>
</div>

我的jQuery代码：

//set image coordinates
function updateCoords(im,obj){
  $('#x').val(obj.x1);
  $('#y').val(obj.y1);
  $('#w').val(obj.width);
  $('#h').val(obj.height);
}
//check coordinates
function checkCoords(){
  if(parseInt($('#w').val())) return true;
  alert('Please select a crop region then press submit.');
  return false;
}
$(document).ready(function(){
  //prepare instant image preview
  var p = $("#filePreview");
  $("#fileInput").change(function(){
    //fadeOut or hide preview
    p.fadeOut();
    //prepare HTML5 FileReader
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("fileInput").files[0]);
    oFReader.onload = function (oFREvent) {
      p.attr('src', oFREvent.target.result).fadeIn();
    };
  });
  //implement imgAreaSelect plugin
  $('img#filePreview').imgAreaSelect({
    onSelectEnd: updateCoords
  });
});
$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    $("#press").click(function() {
       $("#popup").modal("show");             
    });
});
$(document).ready(function(){
    $("#closemodal").click(function(){
        $("img#filePreview").hide();
    });
});

jsfiddle示例：https：//jsfiddle.net/efsdbyxb/5/

还想问我如何设置固定尺寸？

Answer 1

您正在尝试通过 $("img#filePreview").hide();

删除它

问题是插件创建了一个不同的dom节点，因此当您隐藏img时，您不会隐藏这些节点。

解决方案是对要重置选择的插件"说"。

当您想与插件"交谈"时，您需要将Prop/value instance: true传递给插件，这样，插件将返回插件的实例，而不是jQuery Collection scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll。

拥有插件的实例后，您可以调用API方法cancelSelection。

另外，我用form包装了输入，因此您可以在关闭模式时将其重置，因此用户可以上传另一个文件。

这就是您可以请求实例的方式：

imgPreview = $('img#filePreview').imgAreaSelect({
  onSelectEnd: updateCoords,
  instance: true
});

并取消选择：

$("#closemodal").click(function() {
  $("img#filePreview").hide();
  imgPreview.cancelSelection();
  // call it after you upload the image
  $('form')[0].reset();
});

和所有代码：

https://jsfiddle.net/efsdbyxb/6/