[imediasun1]

Есть замечательный простой кропинг который и центрует изображение и правильно его обрезает

<script src="/js/jquery.resizecrop-1.0.3.min.js"></script>
<script>
  
  $(document).ready(function(){
    $('.slide').resizecrop({
      width:320,
      height:320,
      vertical:"top"
    });  
  });  

</script>

Но вот проблема как его правильно прикрутить к слайдеру, в слайдере не хочет работать слайдер формируется из заранее выбранных изображений на клиенте на этой же странице следующим образом,

<script>
$(function()
	   {
	     $(".image").change(showPreviewImage_click);
   }
	 )
	 var num = 0;
	 function showPreviewImage_click(e) {
	   var $input = $(this);
	   var inputFiles = this.files;
	   if(inputFiles == undefined || inputFiles.length == 0) return;
	   for (var i = 0; i<inputFiles.length; i++) {
	     var id = 'id'+ ++num;
	     var input = $('<input/>', {'type': "radio", 'name': "slide_switch", 'id': id,'checked':"checked"});
	     input.appendTo($('.slider'));
	     var label = $('<label/>', {'for': id});
		
	     var img_min = $('<img/>', {'class': 'min'});
	     img_min.appendTo(label);
		 label.appendTo($('.slider'));
		
	     var inputFile = inputFiles[i];
	     var img = $('<img/>', {'class': 'slide'});
		 
	     img.appendTo($('.slider'));
	     var reader = new FileReader();
	 
	     reader.onload = (function (img1, img2)
	       {
	         return function(event) {
	           img1.attr("src", event.target.result);
	           img2.attr("src", event.target.result);
	         };
	       }
	     )(img_min, img)
	 
	     reader.onerror = function(event) {
	       alert("I AM ERROR: " + event.target.error.code);
	     };
	 
	     reader.readAsDataURL(inputFile);}
	 }
</script>

помогите пожалуйста в слайдер вставлять уже кропированное изображение, видимо требуется как то менять указанный код который формирует слайдер так чтобы в слайдер попадало уже кропированное изображение желательно без сервера, помогите пожалуйста кто может