양식 게시로 잘린 이미지를 보내는 방법

Question

자른 이미지를 처리하고 게시물을 보내려면 어떻게해야합니까? 도서관에 Cropper.js을 사용하고 있습니다. 양식 요소에 이미있는 HTML 코드입니다. 이 코드는 샘플 관리 템플릿에서 복사됩니다. 자르기는 작동하지만 파일을 보낼 수 없습니다.

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 :

var $image = $(".image-crop > img") 
$($image).cropper({ 
    aspectRatio: 1, 
    preview: ".img-preview", 
    done: function(data) { 
     // Output the result data for cropping image. 


    } 
}); 

var $inputImage = $("#inputImage"); 
if (window.FileReader) { 
    $inputImage.change(function() { 
     var fileReader = new FileReader(), 
       files = this.files, 
       file; 

     if (!files.length) { 
      return; 
     } 

     file = files[0]; 

     if (/^image\/\w+$/.test(file.type)) { 
      fileReader.readAsDataURL(file); 
      fileReader.onload = function() { 
       $inputImage.val(""); 
       $image.cropper("reset", true).cropper("replace", this.result); 
      }; 
     } else { 
      alert("Please upload a image file"); 
     } 
    }); 
} else { 
    $inputImage.addClass("hide"); 
} 


//Disabled Cropped Image Download 
/* 
$("#download").click(function() { 
    window.open($image.cropper("getDataURL")); 
}); 
*/ 

PHP :

var_dump($_FILES); 

포스트 출력 :

Answer 1

당신은 canvas 첫번째로 할 후 base64로 문자열 toDataURL("image/png")을받을 서버 측에서 그것을 잡을 다시 친절을 살펴 base64로 문자열

를 사용하여 이미지로 변환 이 게시물. Convert an image into binary data in javascript