ruby神社 – 裁剪和直接上传Safari问题

我正在使用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 }); } 

然后在模态按钮上单击我获得裁剪的canvas调用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'); } 

从一开始，一切都工作正常，但后来我发现safari没有toBlobfunction。
我找到了这个：
https://github.com/blueimp/JavaScript-Canvas-to-Blob和toBlob不是函数错误消失了..
由于某些与mime类型相关的问题，我现在无法保存图像。
我能够找到它在safari上失败但不是chrome的确切位置。
determine_mime_type.rb第142行
在第139行的options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}
io.read之后stdin_data为空

有任何想法吗？
谢谢！

UPDATE
我能够弄清楚由…返回的缓存图像的URL

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

从safari中裁剪并上传时返回空文件。

Answer 1

正如我在问题中提到的那样，一旦被cropper.js裁剪，safari就会上传空文件。
问题显然源于这个块：

 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而没有先创建一个文件，一切正常。

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