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