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