Загрузка обрезанного изображения с использованием плагина cropper.js

Question

Я использовал cropper.js плагин в своем приложении для обрезки изображений. Я могу обрезать изображения. Теперь я пытаюсь загрузить изображения, а не загружать их. Я обновил окно модального, которое показывает обрезанное изображение следующим образом:

<!-- Show the cropped image in modal --> 
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4> 
     </div> 
     <div class="modal-body"></div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" style = "float: left;">Close</button> 
     <form class="form-inline" id="croperImgForm" role="form" method="post" action="${rc.getContextPath()}/module/simplewebcontent/save-image" enctype="multipart/form-data"> 
     <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox1" value="option1"> Save Image 
     </label> 
     <label class="checkbox-inline"> 
      <input type="checkbox" id="inlineCheckbox2" value="option2">Save Thumbnail 
     </label> 
     <button type="submit" class="btn btn-primary" id="svImg" style = "margin-left: 10px;">Save</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div><!-- /.modal --> 

Здесь я добавил форму в нижней части с возможностью сохранения изображения. Я пытаюсь использовать следующий сценарий, чтобы сохранить форму:

$("#svImg").click(function() 
    { 
    alert('button clicked'); 
    $("#croperImgForm").submit(function(e) 
    { 
     var postData = $(this).serializeArray(); 
     var formURL = $(this).attr("action"); 
     $.ajax(
     { 
     url : formURL, 
     type: "POST", 
     data : postData, 
     dataType : "html", 
     success:function(htmlData) 
     { 

     }, 
     error: function(xhr, status, errorThrown) { 
      console.log("Error: " + errorThrown); 
      console.log("Status: " + status); 
      console.dir(xhr); 
     }, 
    }); 

     e.preventDefault(); 
     e.unbind(); 
    }); 
}); 

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

// Upload cropped image to server if the browser supports `canvas.toBlob` 
$().cropper('getCroppedCanvas').toBlob(function (blob) { 
    var formData = new FormData(); 

    formData.append('croppedImage', blob); 

    $.ajax('/path/to/upload', { 
    method: "POST", 
    data: formData, 
    processData: false, 
    contentType: false, 
    success: function() { 
     console.log('Upload success'); 
    }, 
    error: function() { 
     console.log('Upload error'); 
    } 
    }); 
}); 

Но я не уверен, как использовать этот код в качестве части представления формы, которую я пытаюсь реализовать как вызов ajax.

Также я использую Spring mvc, поэтому каковы будут параметры в методе контроллера в случае загрузки этого изображения.

Answer 1

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

Я надеюсь, что это поможет кому-то найти на этой странице. (Как я приземлился и не нашел решения) Crop image using Cropper.js, then upload (or display) the cropped image.

Answer 2

github.com/fengyuanchen/cropperj Api Doc для загрузки сервера в качестве определения тега определения формы и изображения src.

и следить ниже параграф getCroppedCanvas():

После этого, вы можете отобразить на холсте в виде изображения непосредственно, или использовать HTMLCanvasElement.toDataURL, чтобы получить URL данных, или использовать HTMLCanvasElement.toBlob получить blob и загрузить его на сервер с помощью FormData, если браузер поддерживает эти API.