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

Question

Im trying to use imgAreaSelect plugin for cutting images, but I have problem.

If I open modal open image there then I see preview image and then I select area and I have in modal button what closes bootstrap modal, but it dont hide selected area.

It must hide selected area and then I have there form where is Image name and if I click upload then it must upload image what I selected.

At the moment it uploads image what I Cutted, but there is selected area if I close modal and its not nice in site.

My modal code:

<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>

My jquery code:

//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 example: https://jsfiddle.net/efsdbyxb/5/

Also wanted ask how I can set fixed size?

Answer 1

You are trying to remove this by $("img#filePreview").hide();

The problem is that the plugin created a different DOM nodes so when you hide the img you not hide those nodes.

The solution is to "say" to the plugin that you want to reset the selection.

When you want to "talk" with the plugin, you need to pass a prop/value instance: true to the plugin, in this way, the plugin will returns an instance of the plugin instead of the jQuery collection Scroll to API method section .

Once you have the instance of the plugin, you can call the api method cancelSelection .

Also, I wrapped the inputs with a form so you can reset it when you close the modal, so the user could upload another file.

That's how you can request the instance:

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

And cancel the selection:

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

And All the code:

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