jQuery 裁剪图像并查看实时预览

Question

好的，我正在使用 jQuery imgareaselect 插件来显示映射覆盖层 x 和 y 坐标的覆盖层。我想使用这些值来为用户实时裁剪图像副本。

我想我只需要找到构建显示图像的 HTML 和 CSS 的最佳方式。

任何想法表示赞赏:)

Answer 1

与 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 的负值。