3

有没有最好的方法来调整文件大小并将文件保存到流星中的 s3。

我虽然关于使用cfs包,但它们给服务器带来了太多的负载。

将图像直接上传到我正在使用的 s3slingshot非常好。

但是 slingshot 只接受文件对象作为输入,它不需要流来存储文件。

是否有任何选项可以在客户端调整图像大小并将其传递给slingshot

包:https ://github.com/CulturalMe/meteor-slingshot 问题:https ://github.com/CulturalMe/meteor-slingshot/issues/36

4

3 回答 3

5

是的,使用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}});
            });
        });
    }
});

在大气.js中还有其他与图像相关的插件值得研究

于 2015-02-14T13:04:18.877 回答
4

我发现以下工作可以将客户端图像操作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 的转换是从https://stackoverflow.com/a/16245768/1238764借来的。

于 2015-06-06T14:06:06.347 回答
0

有很多图像处理插件。我使用的是:cropper

这是一个基于 jquery 的插件,它基本上可以做你想要的 + 更多的事情。操作后,您可以将图像转换为画布,并使用 dataToUrl() 方法将新操作图像的数据传递到您选择的任何数据源。

于 2015-05-07T22:49:01.473 回答