フォームポストでクロップされた画像を送信する方法

Question

クロップされた画像を処理して投稿するにはどうすればよいですか？私はCropper.jsライブラリを使用しています。すでにフォーム要素にあるHTMLコード。これらのコードは、サンプルadminテンプレートからコピーされたものです。トリミングは機能しますが、ファイルを送信できません。

HTML：

<div class="row"> 
<div class="col-md-6"> 
    <div class="image-crop"> 
     <img src="{{ asset('backend/images/image-upload.png') }}"> 
    </div> 
</div> 
<div class="col-md-6"> 
    <h4>Preview image</h4> 
    <div class="img-preview img-preview-sm" style="width: 180px;height:180px;"></div> 
    <hr> 
    <div class="btn-group"> 
     <button class="btn btn-white" id="zoomIn" type="button">Zoom In</button> 
     <button class="btn btn-white" id="zoomOut" type="button">Zoom Out</button> 
     <button class="btn btn-white" id="rotateLeft" type="button">Rotate Left</button> 
     <button class="btn btn-white" id="rotateRight" type="button">Rotate Right</button> 
    </div> 
    <hr> 
    <div class="btn-group"> 
     <label title="Upload image file" for="inputImage" class="btn btn-primary"> 
      <input type="file" accept="image/*" name="file" id="inputImage" class="hide"> 
      Upload new image 
     </label> 
     <label title="Donload image" id="download" class="btn btn-primary">Download</label> 
    </div> 


</div> 

JS：

​​

PHP：

var_dump($_FILES); 

POST出力：

Answer 1

あなたはcanvas最初のようにそれを行うと、その後base64文字列toDataURL("image/png")を取得し、サーバー側でそれをキャッチし、再び親切を見てbase64文字列

を使用して画像に変換しますこの郵便受け。 Convert an image into binary data in javascript