我正在使用带有预览窗格的 Jcrop,如http://net.tutsplus.com/articles/news/working-with-the-jcrop-plugin/教程中所示。这显示了如何使用预览窗格创建一个简单的 Jcrop 界面,以便在裁剪时显示结果。不幸的是,在这种情况下,预览窗格的大小是固定的,并且只是在您裁剪时放大和缩小图像,从而生成相同固定大小的裁剪图像。
我想做的是让预览窗格与裁剪工具一起调整大小,以在用户裁剪时显示结果图像,从而允许用户决定结果图像的尺寸。然后,我可以在上传图像时应用最大或最小尺寸。
预览窗格 CSS 和代码如下。请注意 targ_h 和 targ_w 变量被定义为我选择的任何内容。orig_w 和 orig_h 是从原始图像中读取的。
#preview
{
width: <?php echo $targ_w?>px;
height: <?php echo $targ_h?>px;
overflow:hidden;
}
function updateCoords(c)
{
showPreview(c);
$("#x").val(c.x);
$("#y").val(c.y);
$("#w").val(c.w);
$("#h").val(c.h);
}
function showPreview(coords)
{
var rx = <?php echo $targ_w;?> / coords.w;
var ry = <?php echo $targ_h;?> / coords.h;
$("#preview img").css({
width: Math.round(rx*<?php echo $orig_w;?>)+'px',
height: Math.round(ry*<?php echo $orig_h;?>)+'px',
marginLeft:'-'+ Math.round(rx*coords.x)+'px',
marginTop: '-'+ Math.round(ry*coords.y)+'px'
});
}
有没有人这样做过,并且预览窗格的宽度和高度会随着裁剪工具的宽度和高度而变化?