jQuery 上传使用cropper.js 插件裁剪的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35068954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uploading an image cropped using a cropper.js plugin
提问by Geo Thomas
I have used cropper.jsplugin in my application to crop images. I am able to crop the images. Now I am trying to upload the images instead of downloading them. I have updated the the modal window that shows the cropped image as follows:
我在我的应用程序中使用了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 -->
Here I have added a form in the bottom with option to Save the image. I am trying to use the following script to save the form:
在这里，我在底部添加了一个表单，其中包含保存图像的选项。我正在尝试使用以下脚本来保存表单：
$("#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();
});
});
Now I found from the docs that I should use the following code to save the image:
现在我从文档中发现我应该使用以下代码来保存图像：
// 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');
}
});
});
But I am not sure how to use this code as a part of the form submission which I am trying to implement as an ajax call.
但我不确定如何使用此代码作为我试图作为 ajax 调用实现的表单提交的一部分。
Also I use Spring mvc, so what would be the parameters in the controller method in case of this image upload.
此外，我使用 Spring mvc，那么在此图像上传的情况下，控制器方法中的参数是什么。
回答by Siddhartha Chowdhury
Though this question was asked long back, still I am sharing a link to the solution I just posted in context to someone else's problem.
尽管很久以前就有人问过这个问题，但我仍然分享了一个指向我刚刚在其他人问题的上下文中发布的解决方案的链接。
I hope it will help someone found on this page. ( Like I landed and found no solution ) Crop image using Cropper.js, then upload (or display) the cropped image.
我希望它能帮助在此页面上找到的人。（就像我登陆并没有找到解决方案一样） 使用 Cropper.js 裁剪图像，然后上传（或显示）裁剪后的图像。
回答by mEnE
github.com/fengyuanchen/cropperj Api Docfor Server Upload as formData and Image src tag definition.
github.com/fengyuanchen/cropperj用于服务器上传的Api Doc作为 formData 和 Image src 标签定义。
and watch out the below paragraph of getCroppedCanvas():
并注意下面的 getCroppedCanvas() 段落：
After then, you can display the canvas as an image directly, or use HTMLCanvasElement.toDataURL to get a Data URL, or use HTMLCanvasElement.toBlob to get a blob and upload it to server with FormData if the browser supports these APIs.
之后，您可以直接将画布显示为图像，或者使用 HTMLCanvasElement.toDataURL 获取数据 URL，或者使用 HTMLCanvasElement.toBlob 获取 blob 并使用 FormData 将其上传到服务器（如果浏览器支持这些 API）。
