圖像裁剪使用jquery真棒裁剪，不工作

Question

我有一個MVC應用程序，我需要預覽，裁剪圖像並將其保存在server.Where，因爲我用這麼多裁剪技術來做到這一點Jcrop不支持我的Jquery版本。所以，我用真棒收割機技術來做到這一點。現在我的問題是通過使用這個我能夠預覽圖像，但不裁剪它。任何人都可以幫助我做到這一點。

我的index.cshtml如下所示。

<h2>ImageUpload</h2> 
<link href="~/Content/bootstrap.css" rel="stylesheet" /> 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="~/Content/imgareaselect-default.css" rel="stylesheet" /> 
<link href="~/Content/jquery.awesome-cropper.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/jquery.imgareaselect.js"></script> 
<script src="~/Scripts/jquery.awesome-cropper.js"></script> 


<img class="col-lg-9" id="uploadPreview" style="width: 100px; height: 100px;" /> 
<input id="demo" type="hidden" name="test[image]" onchange="PreviewImage();"> 
<script type="text/javascript"> 
    function PreviewImage() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("demo").files[0]); 

     oFReader.onload = function (oFREvent) { 
      document.getElementById("uploadPreview").src = oFREvent.target.result; 
     }; 
    }; 
</script> 
<script> 
    $(document).ready(function() { 
     $('#demo').awesomeCropper({ 
      width: 200, 
      height: 200, 

      debug: true 
     }); 
    }); 
</script> 
<script type="text/javascript"> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-36251023-1']); 
    _gaq.push(['_setDomainName', 'jqueryscript.net']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 

Answer 1

我用Cropbox.js得到這個和mousewheel.js

<link href="~/Content/jquery.cropbox.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/jquery.mousewheel.js"></script> 
<script src="~/Scripts/jquery.mousewheel.min.js"></script> 
<script src="~/Scripts/jquery.cropbox.js"></script> 

<div id="demo" class="cropbox"> 


    <!-- Crop buttons --> 
    <div class="btn-group"> 

      <i class="glyphicon glyphicon-folder-open"></i> 
      Browse <input type="file" accept="image/*"> 

     <button type="button" class="btn btn-success btn-crop"> 
      <i class="glyphicon glyphicon-scissors"></i> Crop 
     </button> 

    </div> 
    <!-- Crop area --> 
    <div class="workarea-cropbox"> 

     <img class="image-cropbox"> 

     <br /><br /><br /> 
     <div class="frame-cropbox"> 
      <div class="resize-cropbox"></div> 
     </div> 

    </div> 

    <!-- Cropped image --> 
    <div class="cropped panel panel-default"> 

     <div class="panel-body">...</div> 
    </div> 

    <!-- Info of cropping --> 
    <div class="form-group"> 

     <textarea class="data form-control" name="hide" style="display:none;"></textarea> 

    </div> 
</div> 
<script> 
    $(document).ready(function() { 
    $('#demo').cropbox({ 
     selectors: { 
      inputInfo: '#demo textarea.data', 
      inputFile: '#demo input[type="file"]', 
      btnCrop: '#demo .btn-crop', 

      resultContainer: '#demo .cropped .panel-body', 
      messageBlock: '#message' 
     }, 

     imageOptions: { 
      class: 'img-thumbnail', 
      style: 'margin-right: 5px; margin-bottom: 5px' 
     }, 

     variants: [{ 
      width: 200, 
      height: 200, 
      minWidth: 180, 
      minHeight: 200, 
      maxWidth: 800, 
      maxHeight: 800 
     }, { 
      width: 150, 
      height: 200 
     }], 

     messages: [ 
     'Crop a middle image.' 

     ] 

    }); 
}); 

    </script>