红宝石神社-农作物与农作物直接上传Safari问题 [英] Ruby Shrine - crop & direct upload Safari issue

问题描述

我正在使用Shrine，jquery.fileupload和cropper.js实现直接上传
在 add 部分中，我将图像从文件上传加载到模式中，定义裁剪器并显示模式

I am implementing direct upload with Shrine, jquery.fileupload and cropper.js
in the add portion I am loading the image from the file upload to modal, define the cropper and show the 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
  });
}

然后在模式按钮上单击我将裁剪好的画布调用到Blob并提交到S3

Then on the modal button click I get the cropped canvas call on it toBlob and submit to 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后，我将图像属性写入隐藏字段，关闭模态并破坏裁剪器

After the upload to S3 is done I am writing to image attributes to hidden field, closing the modal and destroying the cropper

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

Chrome浏览器从一开始就一切正常，但是后来我发现Safari没有toBlob功能.
我找到了这个:
https://github.com/blueimp/JavaScript-Canvas-to-Blob 而且toBlob不是函数错误..
现在由于某些mime类型相关问题，我无法保存图像.
我能够找出在safari上失败但在chrome上失败的确切位置.
define_mime_type.rb第142行
在options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}
的139行上 io.read

An chrome everything worked fine from the very beginning, but then I figured out the safari has no toBlob functionality.
I found this one:
https://github.com/blueimp/JavaScript-Canvas-to-Blob And toBlob is not a function error was gone..
Now I can not save the image due to some mime type related issue.
I was able to find out the exact location where it fails on safari but not chrome.
determine_mime_type.rb line 142
on line 139 in the options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}
the stdin_data is empty after the io.read

有什么想法吗?
谢谢！

Any ideas?
Thank you!

更新
我能够弄清楚

UPDATE
I was able to figure out that the url to the cached image returned by the

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

从safari裁剪和上传后返回空文件.

returns empty file when cropped and uploaded from safari.

推荐答案

因此，正如我在问题中提到的，safari一旦被cropper.js裁剪后就上传了空文件.
问题显然是由于以下原因引起的:

So as I mentioned in the question safari uploaded empty file once it was cropped by cropper.js.
The problem clearly originated from this block:

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

在对我读过的一篇文章的评论中，我发现safari做了诸如"file.toString"之类的事情，在我看来，这导致文件上传为空. 我直接附加了Blob，而没有首先从中创建文件，并且一切正常.

I found in some comment on one of the articles I read that safari does some thing like "file.toString" which in my case resulted in empty file upload.
I appended the blob directly without creating a file from it first and everything worked fine.

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

这篇关于红宝石神社-农作物与农作物直接上传Safari问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！