Question

我试图使用imgAreaSelect插件来剪切图像，但我有问题。

如果我打开模态打开图像然后我看到预览图像，然后我选择区域，我有模态按钮什么关闭bootstrap模式，但它不隐藏选定的区域。

它必须隐藏选定的区域，然后我有形式在哪里是图像名称，如果我点击上传，那么它必须上传我选择的图像。

目前它上传了我剪切的图像，但是如果我关闭模态并且在网站上它不是很好的话，那么选择区域。

我的模态代码：

<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时，您不会隐藏这些节点。

解决方案是＆＃34;说＆＃34;到要重置选择的插件。

当你想要＆＃34;谈话＆＃34;使用插件，您需要将prop / value instance: true传递给插件，这样，插件将返回插件的实例，而不是jQuery集合Scroll to API method section。

获得插件实例后，可以调用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/

模态关闭后引导模态imgAreaSelect隐藏选定区域

1 个答案: