我正在使用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');
}
Chrome从一开始就一切正常,但后来我发现safari没有toBlob功能。
我找到了这个:
https://github.com/blueimp/JavaScript-Canvas-to-Blob和toBlob不是函数错误消失了..
由于某些与mime类型相关的问题,我现在无法保存图像。
我能够找到它在safari上失败但不是chrome的确切位置。
determine_mime_type.rb第142行
在options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}
的139行
io.read之后stdin_data为空
有任何想法吗? 谢谢!
UPDATE 我能够弄清楚由...返回的缓存图像的URL
$.getJSON('/images/cache/presign', options)
从safari中裁剪并上传时返回空文件。
正如我在问题中提到的那样,一旦被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'
);
}