0

我一直在编写代码来使用jQueryimgAreaSelect插件标记图像。为此，我有一个在单击图像时弹出的模态，并且模态包含内容以标记图像。这部分工作正常。我面临的问题是当我关闭模态时，即使在模态关闭后，我在图像上绘制的边界框仍然存在。我想删除那个模态背景，但我不知道如何继续。

我在 https://jsfiddle.net/Uviii/rb67myvn/2/下面附上了 Jsfiddle 的链接

html:

<div id="myModal" class="modal">

    <!-- The Close Button -->
    <span class="close">&times;</span>

    <!-- Modal Content (The Image) -->
    <div id="imagearea" class="imagearea">
        <div class='dynamic_text' style='display:none;'></div>
        <img class="modal-content" id="img01" src="fashion.jpg">
    </div>

    <div class="text_container">
        <br>
        <div class="img_text"></div>
        <div class="input_tag">
            <span class="right_sec_text">Select a region from the picture</span>
            <div class="error"></div>
            <div class="tags"></div>
            <div class="input_box">
                <input type="text" name="tags" class="input_textbox">
                <button id="settag" class="btn_settag">Set Tag</button>
            </div>

            <input type="hidden" name="x1" id="x1" value="-">
            <input type="hidden" name="y1" id="y1" value="-">
            <input type="hidden" name="x2" id="x2" value="-">
            <input type="hidden" name="y2" id="y2" value="-">
            <input type="hidden" name="w" id="w" value="-">
            <input type="hidden" name="h" id="h" value="-">

            <div class="footer_btn">
                <p><button class="btn_success">Confirm Selection</button>
                <p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
            </div>
        </div>
    </div>
</div>

脚本：

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
    $('.img_error').removeClass("error");
}

$(function() {
    $('#img01').imgAreaSelect({
        handles: true,
        fadeSpeed: 200,
        onSelectChange: preview
    });
});

var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("imgside");
var modalImg = document.getElementById("img01");
img.onclick =function(){
    modal.style.display = "block";
    modalImg.src = this.src;
}

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0];

 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
     modal.style.display = "none";
 }

下面的第一张图片是带有图像和边界框的模态：

在此处输入图像描述

下图显示模态关闭且边界框的灰度保持不变

在此处输入图像描述

有人可以帮我解决这个问题吗？

4

1 回答 1

1

我找到了文档的镜像（主站点是 bust），我注意到了这个parent选项。我猜这可能是相关的，因为您的模式是隐藏/显示的块元素，与默认父级不同的是body.

所以我补充说：

$('#img01').imgAreaSelect({
    handles: true,
    fadeSpeed: 200,
    onSelectChange: preview,
    parent: $('#myModal')
});

它有效 -这是您的 JSFiddle 的一个工作分支。

笔记：

  1. 您的 JSFiddle 只有到源的相对链接，这当然不起作用（它们在https://jsfiddle.net/imgAreaSelect上不存在）。我在 CDNJS 上找到了 Javascript 和 CSS，并将它们添加到我的 JSFiddle 中。

  2. 您的 JSFiddle 包括两者jquery.imgareaselect.pack.js - jquery.imgareaselect.js我认为这可能是同一个库的 2 个副本，一个是压缩的，一个不是？你应该只包括一个！

  3. 您将 jQuery 用于选择器和事件处理程序，但也使用纯 Javascript 来做同样的事情，所有这些都混在一起了。这在技术上没有任何问题，但 IMO 更难阅读、理解和使用它。使用 jQuery 是有代价的——要加载的大型外部库意味着更慢的页面加载、更慢的页面渲染等——所以如果你要付出这个代价，你不妨利用它。例如：

    // Plain Javascript
var modal = document.getElementById("myModal");
img.onclick = function() {
    // ....
}

// in jQuery
var modal = $('#myModal');
img.on('click', function() {
    // ...
});

这是应用了这些更改的第二个 JSFiddle 。

更新

如评论中所述，如果您再次打开图像模式，选择仍然可见......我通过以下方式解决了这个问题：

1) 使用instance: true选项返回插件的实例ias；

// New var for the instance 
var ias;

$(function() {
    ias = $('#img01').imgAreaSelect({
        instance: true,
        // ... etc
    });
});

2) 在关闭处理程序中调用该cancelSelection实例上的方法。

span.on('click', function() {
    modal.css('display', "none");

    // Now we can call methods on the instance
    ias.cancelSelection();
});

我用这个新代码更新了第二个 JSFiddle 。

于 2020-05-17T00:19:41.810 回答