<分区>
我正在使用 Jcrop 裁剪图像并获取坐标。单击“预览”按钮后,我想显示裁剪部分的预览。我不确定我怎样才能做到这一点。
最佳答案
这是按照他们的 thumbnail example 执行此操作的一种方法有一些偏差。
$(function () {
var $target = $('#target'),
$preview = $('#preview');
// hold the coordinates of the cropped image
var coords;
// initialize the widget
$target.Jcrop({
// save the coordinates of the cropped image after selecting
onSelect: function (c) {
coords = c;
}
});
// when a button is clicked, show preview of the cropped image using the saved coordinates
$('button').on('click', function () {
// make a copy of the image with the original dimensions
var $img = $('<img/>', {
src: $target[0].src,
css: {
position: 'absolute',
left: '-' + Math.round(coords.x) + 'px',
top: '-' + Math.round(coords.y) + 'px',
width: $target.css('width'),
height: $target.css('height')
}
});
// set the dimensions of the preview container
$preview.css({
position: 'relative',
overflow: 'hidden',
width: Math.round(coords.w) + 'px',
height: Math.round(coords.h) + 'px'
});
// add+position image relative to its container
$preview.html($img);
});
});
这是一个 demo .
关于jquery - CSS:显示裁剪图像的预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36087150/
相关文章:
javascript - jQuery:使用 CSS 类遍历每个元素
javascript - Angular5 Instascan - 打开相机不工作 <视频>
html - 当我转到 html 页面中的子菜单时,无法在菜单上保持悬停状态
javascript - 如何通过按下 tab 按钮遍历 div 并显示其全部内容
javascript - Jquery - 如何将 PHP 生成的带有数字 id 的 div 附加到带有具有相同数值的元素链接的 div
html - 怎么有xsl :function return a string value including html tags
css - 溢出-x :hidden doesn't prevent content from overflowing in mobile browsers