루비 신사 - 작물 및 직접 업로드 사파리 문제

Question

내가 신사, jquery.fileupload에 직접 업로드를 구현하고 에
내가 모달하는 파일 업로드에서 이미지를로드하고 부분을 추가 cropper.js하고, 자르기 도구를 정의 그리고 모달

if (data.files && data.files[0]) { 
    var reader = new FileReader(); 

    var $preview = $('#preview_avatar'); 
    reader.onload = function(e) { 
     $preview.attr('src', e.target.result); // insert preview image 
     $preview.cropper({ 
      dragMode: 'move', 
      aspectRatio: 1.0/1.0, 
      autoCropArea: 0.65, 
      data: {width: 270, height: 270} 
     }) 
    }; 
    reader.readAsDataURL(data.files[0]); 
    $('#crop_modal').modal('show', { 
     backdrop: 'static', 
     keyboard: false 
    }); 
} 

을 보여 내가 WR 오전 완료 모달 버튼을 내가 toBlob 그것을 자른 캔버스 전화 받기 버튼을 클릭 S3에 업로드 한 후 S3

$('#crop_button').on('click', function(){ 
    var options = { 
     extension: data.files[0].name.match(/(\.\w+)?$/)[0], // set extension 
     _: Date.now()          // prevent caching 
    }; 

    var canvas = $preview.cropper('getCroppedCanvas'); 
    $.getJSON('/images/cache/presign', options). 
    then(function (result) {  
     data.formData = result['fields']; 
     data.url = result['url']; 
     data.paramName = 'file'; 
     if (canvas.toBlob) { 
     canvas.toBlob(
      function (blob) { 
      var file = new File([blob], 'cropped_file.jpeg'); 
      console.log('file', file); 
      data.files[0] = file; 
      data.originalFiles[0] = data.files[0]; 
      data.submit(); 
      }, 
      'image/jpeg' 
     ); 
     } 
    }); 
}); 

제출 이미지 않으면 온라인은 모달을 폐쇄하고 크롬 모든 것을 처음부터 잘 작동 자르기 도구

done: function (e, data) { 
    var image = { 
    id: data.formData.key.match(/cache\/(.+)/)[1], // we have to remove the prefix part 
    storage: 'cache', 
    metadata: { 
     size: data.files[0].size, 
     filename: data.files[0].name.match(/[^\/\\]*$/)[0], // IE returns full path 
     // mime_type: data.files[0].type 
     mime_type: 'image/jpeg' 
    } 
    }; 
    console.log('image', image); 
    $('.cached-avatar').val(JSON.stringify(image)); 
    $('#crop_modal').modal('hide'); 
    $('#preview_avatar').cropper('destroy'); 
} 

을 파괴하지만 나는 사파리 더 toBlob 기능이 없습니다 파악, 숨겨진 필드에 속성.
나는이 하나 발견
https://github.com/blueimp/JavaScript-Canvas-to-Blob 을 그리고 toBlob 인해 일부 MIME 타입 관련 문제에 함수 오류가
가 지금은 이미지를 저장할 수 없습니다 .. 사라졌다되지 않습니다.
크롬이 아닌 사파리에서 실패한 정확한 위치를 알 수있었습니다.
determine_mime_type.rb 라인은 options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}
stdin_data 라인 139에 142
는 io.read

어떤 아이디어 후 비어?
감사합니다.

UPDATE 나는립니다 및 사파리에서 업로드 할 때 캐시 된 이미지에 대한 URL이

$.getJSON('/images/cache/presign', options) 

반환 빈 파일에 의해 반환 된 것을 알아낼 수 있었다.

Answer 1

그래서 사파리가 cropper.js에서 잘린 사파리가 빈 파일을 업로드했다. 분명이 블록에서 유래
문제 : 나는 사파리 내 경우 빈 파일 업로드 결과 "file.toString"과 같은 몇 가지 일을하는 것을 읽은 기사 중 하나에 대한 몇 가지 코멘트에서 발견

if (canvas.toBlob) { 
     canvas.toBlob(
      function (blob) { 
      var file = new File([blob], 'cropped_file.jpeg'); 
      console.log('file', file); 
      data.files[0] = file; 
      data.originalFiles[0] = data.files[0]; 
      data.submit(); 
      }, 
      'image/jpeg' 
     ); 
     } 

.
먼저 파일을 만들지 않고 blob을 직접 추가하면 모든 것이 잘 동작합니다.

if (canvas.toBlob) { 
    canvas.toBlob(
     function (blob) { 
      data.files[0] = blob; 
      data.files[0].name = 'cropped_file.jpeg'; 
      data.files[0].type = 'image/jpeg'; 
      data.originalFiles[0] = data.files[0];       
      data.submit(); 
     }, 
     'image/jpeg' 
    ); 
}