ruby-on-rails - Ruby Shrine - クロップ & 直接アップロード Safari の問題

Question

追加
部分 にShrine、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
  });
}

次に、モーダル ボタンをクリックすると、トリミングされたキャンバスの呼び出しが toBlob になり、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'
        );
      }
  });
});

S3 へのアップロードが完了したら、画像属性を非表示フィールドに書き込み、モーダルを閉じてクロッパーを破棄しています

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 And toBlob is not a function error was gone..
MIME タイプ関連の問題により、画像を保存できません。
クロムではなくサファリで失敗する正確な場所を見つけることができました。 define_mime_type.rb stdin_dataの 139
行目の 142行 目は io.read の後に空です
options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}

何か案は？
ありがとうございました！

UPDATE
によって返されたキャッシュされた画像へのURLを把握できました

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

トリミングしてサファリからアップロードすると、空のファイルが返されます。