上传使用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

在上面的代码中，请记住 Canvas 函数 toBlob 接受 3 个参数（根据 Mozilla docs）：

• callback
• mimeType 例如image/jpg
• quality 例如90

因此，您可以在函数中包含 mimeType 和 quality 选项。另外在附加行中包含文件名的第三个参数（具有相同的扩展名）

canvas.toBlob(function (blob) {
  var formData = new FormData();
  
  /* Add blob and file name */
  formData.append('croppedImage', blob, 'file.jpg');

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

/* This is the important part */
}, 'image/jpeg', 0.9);

Answer 3

github.com/fengyuanchen/cropperj Api Doc 用于服务器上传为 formData 和 Image src 标签定义。

并注意下面的 getCroppedCanvas() 段落：

之后，您可以直接将画布显示为图像，或者使用 HTMLCanvasElement.toDataURL 获取数据 URL，或者使用 HTMLCanvasElement.toBlob 获取 blob 并使用 FormData 将其上传到服务器（如果浏览器支持这些 API）。