jcrop-holder在我的实时页面上重复

编程问答 2022-06-06

问题描述

我正在尝试在网站上创建一个页面，该页面使用 setCount([...exercises,...response.data]); 进行编辑，然后保存编辑后的图像。

我的问题是，当我在Chrome或Microsoft Edge上加载页面时，[]被复制，并且图像在浏览器上出现了两次。

我无法解决问题所在，我们将不胜感激！

以下是我的代码：

if(!empty($_GET)){
    $student = [];
    $student['name'] = $_GET['name'];
    $student['subject'] = $_GET['subject'];
    $student['age'] = $_GET['age'];
    $studentArray = json_decode( file_get_contents('student.json'),true);
    array_push($studentArray,$student);
    $str = print_r($studentArray,true);
    file_put_contents('student.json',json_encode($studentArray));
}

Code inspection image

解决方法

似乎添加jcrop-holder div的工作是由JQuery部分中的<script>代码执行的。

由于在body标记内，已经有jcrop-holder div可用，因此页面加载完成时，您两次拥有div。即JQuery部分完成了应做的工作。因此，这是经过一段时间调试后我想到的解决方案：

<body style="zoom: 1;">
<div class="container">
  <div class="row">
     <div class="span12">
        <div class="jc-demo-box">
           <img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" id="target" style="display: none; visibility: hidden; width: 602px; height: 400px;">
           <div class="jcrop-tracker" style="width: 606px; height: 404px; position: absolute; top: -2px; left: -2px; cursor: crosshair;"></div>
           <input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;">
           <div id="preview-pane">
              <div class="preview-container">
                 <img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" class="jcrop-preview" alt="Preview" style="width: 34113px; height: 22667px; margin-left: -32130px; margin-top: -12013px;">
              </div>
           </div>
           <div class="clearfix"></div>
        </div>
     </div>
  </div>
</div>
</body>

只需替换body中的所有内容，它便会按预期工作。

browserbrowserduplicatesjavascriptjcroplocalhostlocalhost