上传使用cropper.js插件剪切的图像
我在我的应用程序中使用了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 -->
在这里，我已经在底部添加了一个表单，可以选择保存图像。 我正在尝试使用以下脚本来保存表单：
$("#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，那么在这种图片上传的情况下，控制器方法中的参数是什么。
尽管这个问题早就被提出来了，但我仍然与其他人的问题上下文中分享的解决方案链接。
我希望它能帮助在此页面上找到的人。 （就像我登陆并找不到解决方案）使用Cropper.js裁剪图像，然后上传（或显示）裁剪后的图像。
github.com/fengyuanchen/cropperj Api Doc for Server上传为formData和Image src标签定义。
并注意getCroppedCanvas（）的下面一段：
之后，您可以直接将画布显示为图像，或者使用HTMLCanvasElement.toDataURL获取数据URL，或者使用HTMLCanvasElement.toBlob获取blob，并在浏览器支持这些API的情况下使用FormData将其上载到服务器。
链接地址: http://www.djcxy.com/p/31783.html