ルビー神社 - 私は神社との直接アップロードを実装していクロップ＆直接アップロードサファリの問題

Question

は、でjquery.fileuploadとcropper.js
はクロッパーを定義し、私がmodalにファイルアップロードから画像をロードしています部分を追加しますそしてその後、モーダル

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' 
     ); 
     } 
    }); 
}); 

に提出画像にitingしてモーダルを閉じて、クロム、すべてが非常に最初からうまく働いたクロッパー

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機能を持っていない考え出し、隠しフィールドに属性。
私はこの1つが見つかりました：
https://github.com/blueimp/JavaScript-Canvas-to-Blob をそしてtoBlobは関数エラーではありませんが
...消えていた今私が何らかのMIMEタイプの関連問題に画像を保存することはできません。
私はサファリで失敗したが、クロムでは失敗した正確な場所を知ることができました。
determine_mime_type.rbラインライン139上の142
options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}
にstdin_dataはio.read後に空である

任意のアイデア？
ありがとうございます！

UPDATE私はトリミングやサファリからアップロードされたときにキャッシュされた画像へのURLが

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

戻り、空のファイルで返されることを把握することができました。

Answer 1

私が質問したサファリは、それがcropper.jsによって切り取られた後に空のファイルをアップロードしたためです。明らかに、このブロックから発信
問題：私はSafariが、私の場合には、空のファイルアップロードの結果「file.toString」のようないくつかのことを行うことを読んで記事の1にいくつかのコメントで見つかった

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' 
    ); 
}