在 Meteor 中将图像从画布上传到 S3

Question

我没有使用任何编程语言上传文件的经验，所以这对我来说有点麻烦。

我有一个画布需要保存在 Amazon S3 的存储桶中（或者任何其他更简单的优质服务）。我知道toDataURL()，它在这种情况下很有用，但是从那里开始，实际上传它仍然是一个很大的步骤。

我查看了一些包，包括 Slingshot，但这些文档没有详细介绍我的用例，而且它们非常复杂，对我来说基本上难以理解。

使问题进一步复杂化的是，我稍后想要添加 PDF 文件上传，并且为此使用相同的包/服务是有意义的，因为它可以节省我很多时间，但我不知道如果存在这样的通用解决方案。

我有点迷茫，也许正在寻找比这里接受的更一般的指导，但在正确方向上的良好推动也是可以接受的。

还应注意，每当我尝试使用 toDataURL() 时，都会收到此错误：

SecurityError：无法在“HTMLCanvasElement”上执行“toDataURL”： 受污染的画布不得导出。

Answer 1

Slingshot 非常适合。

您需要从画布 (use this method) 中提取 Blob，然后将其传递给 slingshot：

function uploadImage(directive, canvas, type, callback) {
    var uploader = new Slingshot.Upload(directive);

    canvas.toBlob(function (blob) {
        blob.type = type;
        upload.send(blob, callback);
    }, type);

    return uploader;
}

uploadImage("myDirective", document.getElementById("mycanvas"), "image/png", function (error, downloadUrl) {
    console.log("file is now at %s", downloadUrl);
});

现在服务器端可能是（但这真的取决于你真正想要什么）：

Slingshot.create("myDirective", Slingshot.S3Storage, {
  allowedFileTypes: "image/png"

  acl: "public-read",

  authorize: function () {
    //Deny uploads if user is not logged in.
    if (!this.userId) {
      var message = "Please login before posting files";
      throw new Meteor.Error("Login Required", message);
    }

    return true;
  },

  key: function (file) {
    //Store file into a directory by the user's username.
    var user = Meteor.users.findOne(this.userId);
    return user.username + "/canvas.png";
  }
});

如果您想支持 pdf 上传，您只需将 application/pdf 添加到 allowedFileTypes 或创建一个单独的指令来授权 pdf 上传。

您可以在 slingshot at this unreleased branch 上找到一些更好的文档。