logo标签列表

使用cropper.js插件裁剪后上传图像

jqueryspring-mvchtml5-canvas
10

我在我的应用程序中使用了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，那么在进行此图像上传时控制器方法中会有哪些参数？

可能是如何使用jcrop在客户端裁剪图像并上传？的重复问题。 - Jared Goguen
这是一个完整的教程：http://howsolve.com/image-crop-with-laravel54-intervention-and-cropperjs-jquery/ - M Arfan
3个回答
11
5
在您的代码中，记住 Canvas 函数 toBlob 接受 3 个参数（根据 Mozilla 文档）：
  • 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);
0

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

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接