web-dev-qa-db-ja.com

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">&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を使用しているため、この画像をアップロードする場合のコントローラーメソッドのパラメーターはどのようになりますか。

jqueryspring-mvchtml5-canvas
8
Geo Thomas

この質問はずっと前に尋ねられましたが、私はまだ他の誰かの問題に関連して先ほど投稿したソリューションへのリンクを共有しています。

このページで見つけた人に役立つことを願っています。 （私が着陸して解決策が見つからなかったように） Cropper.jsを使用して画像を切り抜き、切り抜いた画像をアップロード（または表示）します。

4
Siddhartha Chowdhury

github.com/fengyuanchen/cropperj Api Doc formDataおよびImage srcタグ定義としてのサーバーアップロード用。

getCroppedCanvas（）の以下の段落に注意してください。

その後、キャンバスを画像として直接表示するか、HTMLCanvasElement.toDataURLを使用してデータURLを取得するか、またはHTMLCanvasElement.toBlobを使用してblobを取得し、ブラウザーがこれらのAPIをサポートしている場合はそれをFormDataと共にサーバーにアップロードします。

0
mEnE