Jcrop 更改父级 div 以进行缩略图预览
Jcrop change parent div for thumbnail preview
我正在使用 Jcrop 插件裁剪带有预览缩略图的图片。
Jcrop 插件使用内部 jcrop-active div 创建预览图像。那么如何更改其他 div 内的预览 div 层呢?
https://jsfiddle.net/cuwfpo45/
上的工作示例
这里HTML:
<div id="form-photo" class="form-photo clearfix">
<div class="form-group">
<img src="<?php echo $image; ?>" id="target" />
</div>
<form id="" class="s-form" method="POST" action="test3.php" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" name="image" value="<?php echo $image; ?>" />
<input type="submit" value="Submit" />
</form>
这是我的 JS 代码:
$(function(){
var box_width = $('#form-photo').width();
$('#target').Jcrop({
setSelect: [ 100, 100, 500, 500 ],
aspectRatio: 1,
onSelect: updateCoords,
onChange: updateCoords,
boxWidth: box_width
},function(){
var jcrop_api = this;
thumbnail = this.initComponent('Thumbnailer', { width: 330, height: 320 });
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
感谢您的帮助!
编辑:我已进行必要的调整以在单独的 div 中显示预览。
$(function(){
var box_width = $('#form-photo').width();
var $preview = $('#preview');
$('#target').Jcrop({
onChange: showPreview,
onSelect: showPreview,
onRelease: hidePreview,
aspectRatio: 1
});
function hidePreview()
{
$preview.stop().fadeOut('fast');
};
function showPreview(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
};
});
#form-photo{width:500px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/css/Jcrop.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.min.js"></script>
<div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="preview" />
</div>
<div id="form-photo" class="form-photo clearfix">
<div class="form-group">
<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="target" />
</div>
<form id="" class="s-form" method="POST" action="act/test3.php" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" name="image" value="<?php echo $image; ?>" />
<input type="submit" value="Submit" />
</form>
</div>
我正在使用 Jcrop 插件裁剪带有预览缩略图的图片。 Jcrop 插件使用内部 jcrop-active div 创建预览图像。那么如何更改其他 div 内的预览 div 层呢?
https://jsfiddle.net/cuwfpo45/
上的工作示例这里HTML:
<div id="form-photo" class="form-photo clearfix">
<div class="form-group">
<img src="<?php echo $image; ?>" id="target" />
</div>
<form id="" class="s-form" method="POST" action="test3.php" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" name="image" value="<?php echo $image; ?>" />
<input type="submit" value="Submit" />
</form>
这是我的 JS 代码:
$(function(){
var box_width = $('#form-photo').width();
$('#target').Jcrop({
setSelect: [ 100, 100, 500, 500 ],
aspectRatio: 1,
onSelect: updateCoords,
onChange: updateCoords,
boxWidth: box_width
},function(){
var jcrop_api = this;
thumbnail = this.initComponent('Thumbnailer', { width: 330, height: 320 });
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
感谢您的帮助!
编辑:我已进行必要的调整以在单独的 div 中显示预览。
$(function(){
var box_width = $('#form-photo').width();
var $preview = $('#preview');
$('#target').Jcrop({
onChange: showPreview,
onSelect: showPreview,
onRelease: hidePreview,
aspectRatio: 1
});
function hidePreview()
{
$preview.stop().fadeOut('fast');
};
function showPreview(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
};
});
#form-photo{width:500px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/css/Jcrop.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.min.js"></script>
<div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="preview" />
</div>
<div id="form-photo" class="form-photo clearfix">
<div class="form-group">
<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="target" />
</div>
<form id="" class="s-form" method="POST" action="act/test3.php" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" name="image" value="<?php echo $image; ?>" />
<input type="submit" value="Submit" />
</form>
</div>