Tôi đã sử dụng cropper.js plugin trong ứng dụng của mình để cắt hình ảnh. Tôi có thể cắt hình ảnh. Bây giờ tôi đang cố gắng tải lên các hình ảnh thay vì tải chúng xuống. Tôi đã cập nhật cửa sổ modal cho thấy ảnh đã được cắt như sau:Tải lên hình ảnh bị cắt bằng cách sử dụng plugin 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">×</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 -->
Ở đây tôi đã thêm một hình thức ở phía dưới với tùy chọn để lưu hình ảnh. Tôi cố gắng để sử dụng kịch bản sau đây để lưu các hình thức:
$("#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();
});
});
Bây giờ tôi tìm thấy từ các tài liệu mà tôi nên sử dụng đoạn mã sau để lưu hình ảnh:
// 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');
}
});
});
Nhưng tôi không chắc chắn làm thế nào để sử dụng mã này như là một phần của việc gửi biểu mẫu mà tôi đang cố gắng thực hiện như một cuộc gọi ajax.
Ngoài ra tôi sử dụng Spring mvc, do đó, những gì sẽ là các tham số trong phương pháp điều khiển trong trường hợp tải lên hình ảnh này.
Có thể trùng lặp [Làm cách nào để cắt hình ảnh ở phía máy khách bằng cách sử dụng jcrop và tải lên?] (Http://stackoverflow.com/questions/34651017/how-should-i-crop-the-image- at-client-side-using-jcrop-và-upload-it) –
đây là hướng dẫn đầy đủ http://howsolve.com/image-crop-with-laravel54-intervention-and-cropperjs-jquery/ –