자른 파일을 입력으로 입력하십시오 : 파일 값

Question

사용자 업로드 파일 자르기에 jQuery Croppie lib를 사용하고 있습니다. 사용자가 파일을 업로드 할 때 이미지를자를 수있는 모달을 여는 중입니다. 그 후이 자른 이미지를 파일 입력 값으로 설정하여 사용자가 모든 준비가 완료되면 양식을 제출할 수 있지만 자른 이미지를 입력 값으로 "설정"하는 방법을 모르겠습니다.

여기 내 코드입니다.

$scope.openCropModal = function(files) { 
      if (!(files[0] instanceof Object) || (fileUploadMaxSize * 1100000) < files[0].size) { 
       Alertify.alert('File size must be less than ' + fileUploadMaxSize + 'mb'); 

       return false; 
      } 
      $('#cropLogoModal').modal({}); 

      var $uploadCrop = $('#cropperMainContainer').croppie({ 
       viewport: { 
        width: 200, 
        height: 200, 
        type: 'square' 
       }, 
       boundary: { 
        width: 300, 
        height: 300 
       }, 
       enableExif: true, 
       enableOrientation: true, 
       orientation: 4, 
      }); 

      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $uploadCrop.croppie('bind', { 
        url: e.target.result 
       }).then(function() { 

       }); 

      }; 

      reader.readAsDataURL(files[0]); 

      $('#ready').on('click', function() { 
       $uploadCrop.croppie('result', 'blob').then(function(blob) { 

       }); 
      }); 

      $('.vanilla-rotate').on('click', function() { 
       $uploadCrop.croppie('rotate', parseInt($(this).data('deg'))); 
      }); 
     } 

Answer 1

파일 첨부 파일로 저장하는 대신 bas64로 인코딩 된 blob 데이터의 숨김 필드를 만듭니다.

 var reader = new FileReader(); 

     reader.onload = function (e) { 
      $uploadCrop.croppie('bind', { 
       url: e.target.result 
      }).then(function(blob) { 
       $('#hiddenContent').val(btoa(blob)); 
      }); 
     }; 

서버 측에서는이 base64로 인코딩 된 이미지 콘텐츠를 읽고 새 파일에 저장하십시오.

경고 코드 테스트를 거치지 않았습니다.