将图像从 canvas 上传到 Meteor 中的 S3

Question

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

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

我查看了一些包，Slingshot 包括在内，但是文档没有通过我的用例，它们非常复杂，对我来说，基本上是不可理解的。

使事情进一步复杂化的是我稍后想添加 PDF 文件上传，并且为此使用相同的 package/service 是有意义的，因为它会节省我很多时间，但我不知道有没有这样万能的解决方案。

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

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

SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Answer 1

Slingshot非常适合

您需要从您的 canvas (use this method) 中提取一个 Blob，然后将其传递给弹弓：

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上传的指令。

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

将图像从 canvas 上传到 Meteor 中的 S3

Uploading image from canvas to S3 in Meteor

file-upload

canvas

amazon-s3

meteor