CSS: 显示裁剪图像的预览

Question

我正在使用 Jcrop 裁剪图像并获取坐标。我想在单击 "Preview" 按钮时显示裁剪部分的预览。我不确定我该如何实现。

Answer 1

单击带有 ajax 的预览按钮并将其加载到模态框或花式框

后，您可以裁剪并保存图像

Answer 2

这是遵循他们的 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。

CSS: 显示裁剪图像的预览

CSS: display preview for cropped image

html

css

jquery

jcrop