如何在图片上应用边框

如何解决如何在图片上应用边框

我一直在为图像标记编写代码，我有一组图像，使用php从中显示三个随机图像。因此，当用户单击图像时，将弹出一个模态并显示用于标记的屏幕，并在图像上方带有默认边框。我已在下面附加了模态的图像。我的代码存在的问题是；我希望在单击图像时默认边界框会出现在图像上，但是问题是默认边界框仅在第一个图像上方出现，而在第二个图像上单击时，边界框不会出现在图像上方。

用于检索3张随机图像的代码：

 $dire="Annotated Dataset/images/";
 $images = glob($dire. '*.{jpg,jpeg}',GLOB_BRACE);
 shuffle($images);
 $images=array_slice($images,3);
 $_SESSION['images']=$images;

在屏幕上显示这3张图像后，

 $gallery=$_SESSION['images'];

 <div id="gallery ">

  <?php
foreach ($gallery as $i) {
    ?>

    <img href="#myModal" data-toggle="modal" data-target="#myModal" src="<?php echo "$i"; ?>" class="modal_img">
 
   <?php }
   ?>

在上面的代码中，我使用foreach循环在屏幕上显示了三个图像。

单击时用于图像的模态代码

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

<!-- The Close Button -->
<span class="close">&times;</span>
<input type="hidden" id="result"></input>

<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">

<img class="modal-content" id="img01">

</div>

<div class="footer_btn">
   <input type="text" id="name_tag" name="name_tag"><br><br>
   <p><button class="btn_success" id="btn_add" value="add areas">Confirm</button>
 </div>
      
   </div>

因此，当用户单击图像时，将弹出图像模态，并且默认情况下会在图像上方显示边框：

  $(function(){
    let modal = $('#myModal')
    $(".modal_img").on("click",function(){
    var src = $(this).attr("src");
    modal.css({"display": "block"});
    $("#img01",modal).prop("src",src);
    console.log(src);

   $('#img01').selectAreas({
     minSize: [10,10],onChanged: debugQtyAreas,maxAreas:1,parent: $('#myModal'),areas: [
       {
         x: 10,y: 20,width: 60,height: 100,}]
     });
      
     $('.close').click(function(){
       $('#img01').selectAreas('reset');
     });
  });

图片2：具有默认边框的模态屏幕

上图显示了图像上的边界框。但这是用户单击的第一张图像，当用户关闭此图像并单击另一张图像时，将弹出模式弹出窗口，但上方没有显示边框。我希望单击该框时，它不仅显示在第一个图像上，还显示在所有图像上。我无法弄清楚哪里出了问题。有人可以帮我解决这个问题。谢谢...