CSS: 显示裁剪图像的预览
CSS: display preview for cropped image
我正在使用 Jcrop 裁剪图像并获取坐标。我想在单击 "Preview" 按钮时显示裁剪部分的预览。我不确定我该如何实现。
单击带有 ajax 的预览按钮并将其加载到模态框或花式框
后,您可以裁剪并保存图像
这是遵循他们的 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。
我正在使用 Jcrop 裁剪图像并获取坐标。我想在单击 "Preview" 按钮时显示裁剪部分的预览。我不确定我该如何实现。
单击带有 ajax 的预览按钮并将其加载到模态框或花式框
后,您可以裁剪并保存图像这是遵循他们的 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。