jquery - CSS:显示裁剪图像的预览

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        3年前关闭。
                                                                                            
                
        
我正在使用Jcrop裁剪图像，并且正在获取坐标。我想在单击“预览”按钮后显示裁剪部分的预览。我不确定如何实现。

最佳答案

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

关于jquery - CSS:显示裁剪图像的预览，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36087150/