Question

我正在使用Jcrop裁剪图像，我正在获取坐标。我想在点击＆＃34;预览＆＃34;后显示裁剪部分的预览。按钮。我不知道如何实现这一点。

Answer 1

这是在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。

Answer 2

单击带有ajax的预览按钮并将其加载到模态或幻灯箱后，您可以裁剪并保存图像

CSS：显示裁剪图像的预览

2 个答案: