Fatal编程技术网
  • javascript/
  • Javascript jcrop支架在我的live页面上重复

Javascript jcrop支架在我的live页面上重复

javascript browser

Javascript jcrop支架在我的live页面上重复,javascript,browser,duplicates,localhost,jcrop,Javascript,Browser,Duplicates,Localhost,Jcrop,我试图在我的网站上创建一个页面，使用Jcrop编辑并保存编辑的图像 我的问题是，当我在Chrome或Microsoft Edge上加载页面时，jcrop支架被复制，图像在浏览器上出现两次 我不知道是什么问题，任何帮助都将不胜感激 下面是我的代码： <!DOCTYPE html> <html lang="en"> <head> <title>Aspect Ratio with Preview Pane | Jcrop

我试图在我的网站上创建一个页面，使用
Jcrop
编辑并保存编辑的图像

我的问题是，当我在Chrome或Microsoft Edge上加载页面时，
jcrop支架
被复制，图像在浏览器上出现两次

我不知道是什么问题，任何帮助都将不胜感激

下面是我的代码：

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


带预览窗格的纵横比| Jcrop演示
/*仅当#预览窗格
已放置在Jcrop小部件中*/
.jcrop支架#预览窗格{
显示：块；
位置：绝对位置；
z指数：2000；
顶部：10px；
右：-280px；
填充：6px；
边框：1pxRGBA（0,0,0,4）实心；
背景色：白色；
-webkit边界半径：6px；
-moz边界半径：6px；
边界半径：6px；
-webkit盒阴影：1px 1px 5px 2px rgba（0,0,0,0.2）；
-moz盒阴影：1px1px5px2pRGBA（0,0,0,0.2）；
盒影：1px1p5px2pRGBA（0,0,0,0.2）；
}
/*Javascript代码将设置裁剪的纵横比
基于缩略图预览大小的区域，
此处指定*/
#预览窗格。预览容器{
宽度：250px；
高度：170px；
溢出：隐藏；
}
jQuery（函数（$）{
//创建变量（在此范围内）以保存API和图像大小
var jcrop_api，
庞德，
庞迪，
//获取有关预览窗格的一些信息
$preview=$（“#预览窗格”），
$pcnt=$（“#预览窗格.预览容器”），
$pimg=$（“#预览窗格.预览容器img”），
xsize=$pcnt.width（），
ysize=$pcnt.height（）；
log（'init'，[xsize，ysize]）；
$（'#target'）.Jcrop({
onChange:updatePreview，
onSelect:updatePreview，
aspectRatio:xsize/ysize
}，函数（）{
//使用API获得真实的图像大小
var bounds=this.getBounds（）；
boundx=边界[0]；
boundy=边界[1]；
//将API存储在jcrop_API变量中
jcrop_api=这个；
//将预览移动到jcrop容器中以进行css定位
$preview.appendTo（jcrop_api.ui.holder）；
});
函数updatePreview（c）
{
如果（parseInt（c.w）>0）
{
var rx=xsize/c.w；
var ry=ysize/c.h；
$pimg.css({
宽度：数学圆（rx*boundx）+“px”，
高度：数学圆（ry*boundy）+“px”，
marginLeft:“-”+数学四舍五入（rx*c.x）+“px”，
marginTop:“-”+数学圆（ry*c.y）+“px”
});
}
};
});
添加
jcrop持有者的工作似乎是由
部分中的
JQuery
代码执行的

由于在
主体
标记内部，已经有一个
jcrop支架
div
可用，因此当页面加载完成时，您将有两次
div
。i、 e.
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>







只需更换
正文中的所有内容
，它就可以正常工作。
如果您正在实现代码的其他部分，请也添加它们。根据HTML代码，提到的名为“jcrop holder”的
div
在代码中只出现过一次，而且也只出现过一次。您好，Tahmid，感谢您的回复。我已经为标题添加了额外的代码。我还附上了一张图片，显示在chrome上查看页面时，div jcrop支架复制了一些原因？哇！非常感谢，这确实有效！我必须花大约6个小时来解决这个问题，非常感谢你的帮助。