Jcrop 更改父 div 以进行缩略图预览

Question

我正在使用 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;
}; 

感谢您的帮助！

Answer 1

编辑：我进行了必要的调整以在单独的 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>