CSS：裁剪图像的显示预览[关闭]

Posted 2023-02-25

【中文标题】CSS：裁剪图像的显示预览[关闭]

【英文标题】：CSS: display preview for cropped image [closed]

【发布时间】：2016-03-18 14:37:47

【问题描述】：

我正在使用 Jcrop 裁剪图像并获取坐标。我想在单击“预览”按钮时显示裁剪部分的预览。我不知道如何才能做到这一点。

【问题讨论】：

您尝试过任何代码吗？

【参考方案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。

【讨论】：

非常感谢。你拯救了我的一天。这正是我想要的。

【参考方案2】：

您可以在单击带有 ajax 的预览按钮并将其加载到模态框或花式框后裁剪并保存图像

【讨论】：

就我而言，除非预览图像得到用户的批准，否则我不想保存图像。有什么办法吗？