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

Posted 2023-02-25

【中文标题】Jcrop 更改父 div 以进行缩略图预览

【英文标题】：Jcrop change parent div for thumbnail preview

【发布时间】：2018-05-01 07:29:57

【问题描述】：

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

感谢您的帮助！

【问题讨论】：

请也分享您的 HTML 设置。

请看帖子，用HTML编辑，谢谢！

所以你想在另一个潜水而不是默认的潜水中显示这个预览？让我编辑我的答案

是的，正确，我想将父 div 更改为另一个而不是默认值。

我进行了必要的调整以在指定的图像元素中显示预览，而不是默认的。请检查并告诉我是否可以。

【参考方案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-photowidth: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>

【讨论】：

裁剪没问题，我只需要将父级默认 div 更改为另一个。

现在检查。预览显示在指定的 div 中。只需裁剪并在裁剪区域周围移动即可查看预览。