好的,我正在使用 jQuery imgareaselect 插件来显示映射覆盖层 x 和 y 坐标的覆盖层。我想使用这些值来为用户实时裁剪图像副本。
我想我只需要找到构建显示图像的 HTML 和 CSS 的最佳方式。
任何想法表示赞赏:)
最佳答案
与 Gustavo 的回答类似,您可以将图像定位为 div(或任何元素)的背景,然后使用背景图像上的 x 和 y 位置以及 div 的宽度和高度来创建框架预览裁剪后的图像。实际裁剪后的文件必须使用适当的图像库在服务器上生成。
使用您的示例,您可以像这样更新 imgAreaSelect()
的 onSelectEnd 处理程序:
$('#ladybug').imgAreaSelect({
onSelectEnd: function (img, selection) {
var div = $('.imgwrapper2');
//image
div.css('background-image', 'url(' + img.src + ')');
//width
div.css('width', selection.x2 - selection.x1);
//height
div.css('height', selection.y2 - selection.y1);
//x offset
div.css('background-position-x', -selection.x1);
//y offset
div.css('background-position-y', selection.y2);
}
});
请注意,背景图像的 x 坐标值是 selection.x1
的负值。
关于jQuery 裁剪图像并查看实时预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4881011/