CSS：裁剪图像的显示预览

Question

我使用Jcrop裁剪图像，我正在获取坐标。我想在点击“预览”按钮后显示裁剪部分的预览。我不知道我该怎么做到这一点。

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点击预览按钮后，并加载它在模式或的fancybox