javascript - jcrop-holder 在我的实时页面上重复
问题描述
我正在尝试在我的网站上创建一个页面，用于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>
解决方案
似乎添加的工作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它应该可以按预期工作。
推荐阅读
- python - 从 JavaScript 代码字符串中抓取特定文本
- javascript - AngularJs获取下载附件的请求
- erlang - 将 Learn You Some Erlang 教程从 gen_fsm 转换为 gen_statem
- esp32 - 无法接收通过 LoRa 发送的第二条或第三条消息
- reactjs - VS Code 任务：在创建文件夹上运行
- regex - Ansible：在变量周围加上引号，但前提是引号不存在
- javascript - 正则表达式映射我的所有单词（即使重复）
- c# - 迁移 - 实体框架数据库优先方法
- windows-store - 如何从 Windows 应用商店/Microsoft 合作伙伴中心删除应用程序？
- android - 错误未来
_loadAsync 我的项目