上传使用cropper.js插件裁剪的图像
我在我的应用程序中使用了cropper.js插件来裁剪图像。 我能够裁剪图像。 现在我正在尝试上传图片而不是下载它们。 我更新了显示裁剪图像的模态窗口，如下所示：
在这里，我在底部添加了一个表单，其中包含保存图像的选项。 我试图使用以下脚本来保存表单：
$("#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（）的以下段落：
之后，您可以直接将canvas显示为图像，或使用HTMLCanvasElement.toDataURL获取数据URL，或使用HTMLCanvasElement.toBlob获取blob并使用FormData将其上载到服务器（如果浏览器支持这些API）。