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

jcrop-holder is duplicated on my live page

我正在尝试在我的网站上创建一个页面,使用 Jcrop 编辑并保存编辑后的图像。

我的问题是,当我在 Chrome 或 Microsoft Edge 上加载页面时,jcrop-holder 被复制并且图像在浏览器中出现两次。

我无法弄清楚问题出在哪里,如有任何帮助,我们将不胜感激!

下面是我的代码:

<!DOCTYPE html>
<html lang="en">
    
<head>
  <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/heroic-features.css" rel="stylesheet">

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap[enter image description here][1]/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/heroic-features.css" rel="stylesheet">

<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 250px;
  height: 170px;
  overflow: hidden;
}

</style>


<script type="text/javascript">

  jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    
    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };

  });

</script>

</head>    



<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-holder" style="width: 602px; height: 400px; position: relative; background-color: black;">
      
    <div style="position: absolute; z-index: 600;">
            
          <div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
              
              <img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 602px; height: 400px;">
              
              <div class="jcrop-hline" style="position: absolute; opacity: 0.4;"> </div>
              
              <div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;"> </div>
              
              <div class="jcrop-vline right" style="position: absolute; opacity: 0.4;"></div>
              <div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div>
              <div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;"></div>
              
          </div>
          
        <div style="width: 100%; height: 100%; z-index: 320; display: none;">
            
            <div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;"></div>
            <div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;"></div>
            <div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;"></div>
            <div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;"></div>
            <div class="ord-n jcrop-handle" style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div>
            <div class="ord-s jcrop-handle" style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div>
            <div class="ord-e jcrop-handle" style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div>
            <div class="ord-w jcrop-handle" style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div>
            <div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div>
            <div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div>
            <div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div>
            <div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div>
            
        </div>
    </div>
        
        <div class="jcrop-tracker" style="width: 606px; height: 404px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;"></div>
        <input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;">
        <img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" alt="\[Jcrop Example\]" style="display: block; visibility: visible; width: 602px; height: 400px; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px;">
               
    <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>
  

  
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>

Code inspection image

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

因为在您的 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 中的所有内容,它就会按预期工作。