1

我正在尝试使用 imgAreaSelect 插件来剪切图像，但我遇到了问题。

如果我在那里打开模态打开图像，然后我会看到预览图像，然后我选择区域，我在模态按钮中有关闭引导模式的按钮，但它不会隐藏选定区域。

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

目前它上传了我剪切的图像，但是如果我关闭模态并且它在站点中并不好，则会出现选定区域。

我的模态代码：

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

还想问我如何设置固定大小？

4

1 回答 1

0

您正在尝试通过以下方式删除它$("img#filePreview").hide();

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

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

当你想和插件“交谈”时，你需要传递一个 prop/valueinstance: true给插件，这样插件就会返回插件的一个实例，而不是 jQuery 集合Scroll to API method section。

一旦你有了插件的实例，你就可以调用 api 方法cancelSelection。

此外，我用 a 包装了输入，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/

于 2017-11-22T15:58:51.273 回答