在流星中调整大小并将文件保存到 s3
resize and save files to s3 in meteor
有什么最好的方法可以在 meteor 中调整大小并将文件保存到 s3。
我想使用 cfs
包,但它们给服务器带来了太多负载。
直接上传图片到s3,我用的slingshot
很好。
但 slingshot 仅将文件对象作为输入,它不使用流来存储文件。
是否有任何选项可以在客户端调整图像大小并将其传递给 slingshot
程序包
包裹:https://github.com/CulturalMe/meteor-slingshot
问题:https://github.com/CulturalMe/meteor-slingshot/issues/36
是的,clientside-image-manipulation 是可能的,这是我对文档的未经测试的解释:
Template.upload.events({
'change #image-upload': function(event, target) {
var uploader = new Slingshot.Upload("myFileUploads");
var file = event.target.files[0];
var img = null;
processImage(file, 300, 300, function(data){
uploader.send(data, function (error, downloadUrl) {
if(error)
throw new Meteor.Error('upload', error);
Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}});
});
});
}
});
还有其他image related plugins worth investigating at atmosphere.js
有很多图像处理插件。我用的是:cropper
这是一个基于 jquery 的插件,基本上可以完成您想要的事情 + 多一点。处理后,您可以将图像转换为 canvas 并使用 dataToUrl() 方法,您可以将新处理图像的数据传递到您选择的任何数据源。
我发现为了集成 Clientside Image Manipulation with Slingshot(带有 ES6 承诺的异步代码),以下工作有效:
var uploader;
function b64ToBlob(b64Data, contentType, sliceSize) {
var byteNumbers, i, slice;
var offset = 0;
var byteCharacters = atob(b64Data);
var byteArrays = [];
sliceSize = sliceSize || 512;
byteArrays = [];
while (offset < byteCharacters.length) {
slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = [];
for (i = 0; i < slice.length; ++i) {
byteNumbers.push(slice.charCodeAt(i));
}
byteArrays.push(new Uint8Array(byteNumbers));
offset += sliceSize;
}
return new Blob(byteArrays, {type: contentType});
}
uploader = new Slingshot.Upload("pictures");
new Promise(function (resolve) {
processImage(file, 300, 300, resolve);
}).then(function (dataUri) {
var match = /^data:([^;]+);base64,(.+)$/.exec(dataUri);
return [file.name, match[1], match[2]];
}).then(function (params) {
var name = params[0];
var type = params[1];
var b64 = params[2];
return new Promise(function (resolve, reject) {
var blob = b64ToBlob(b64, type);
blob.name = name;
uploader.send(blob, function (error, downloadUrl) {
if (error != null) {
reject(error.message);
} else {
resolve(downloadUrl);
}
});
});
});
从 Base64 到 blob 的转换借鉴自 。
有什么最好的方法可以在 meteor 中调整大小并将文件保存到 s3。
我想使用 cfs
包,但它们给服务器带来了太多负载。
直接上传图片到s3,我用的slingshot
很好。
但 slingshot 仅将文件对象作为输入,它不使用流来存储文件。
是否有任何选项可以在客户端调整图像大小并将其传递给 slingshot
程序包
包裹:https://github.com/CulturalMe/meteor-slingshot 问题:https://github.com/CulturalMe/meteor-slingshot/issues/36
是的,clientside-image-manipulation 是可能的,这是我对文档的未经测试的解释:
Template.upload.events({
'change #image-upload': function(event, target) {
var uploader = new Slingshot.Upload("myFileUploads");
var file = event.target.files[0];
var img = null;
processImage(file, 300, 300, function(data){
uploader.send(data, function (error, downloadUrl) {
if(error)
throw new Meteor.Error('upload', error);
Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}});
});
});
}
});
还有其他image related plugins worth investigating at atmosphere.js
有很多图像处理插件。我用的是:cropper
这是一个基于 jquery 的插件,基本上可以完成您想要的事情 + 多一点。处理后,您可以将图像转换为 canvas 并使用 dataToUrl() 方法,您可以将新处理图像的数据传递到您选择的任何数据源。
我发现为了集成 Clientside Image Manipulation with Slingshot(带有 ES6 承诺的异步代码),以下工作有效:
var uploader;
function b64ToBlob(b64Data, contentType, sliceSize) {
var byteNumbers, i, slice;
var offset = 0;
var byteCharacters = atob(b64Data);
var byteArrays = [];
sliceSize = sliceSize || 512;
byteArrays = [];
while (offset < byteCharacters.length) {
slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = [];
for (i = 0; i < slice.length; ++i) {
byteNumbers.push(slice.charCodeAt(i));
}
byteArrays.push(new Uint8Array(byteNumbers));
offset += sliceSize;
}
return new Blob(byteArrays, {type: contentType});
}
uploader = new Slingshot.Upload("pictures");
new Promise(function (resolve) {
processImage(file, 300, 300, resolve);
}).then(function (dataUri) {
var match = /^data:([^;]+);base64,(.+)$/.exec(dataUri);
return [file.name, match[1], match[2]];
}).then(function (params) {
var name = params[0];
var type = params[1];
var b64 = params[2];
return new Promise(function (resolve, reject) {
var blob = b64ToBlob(b64, type);
blob.name = name;
uploader.send(blob, function (error, downloadUrl) {
if (error != null) {
reject(error.message);
} else {
resolve(downloadUrl);
}
});
});
});
从 Base64 到 blob 的转换借鉴自 。