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

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

我有一个画布需要保存在AmazonS3的一个bucket中（或者任何其他更好的服务，如果它更简单的话）。我知道

toDataURL（）

，它在这种情况下很有用，但从这里开始，实际上传它仍然是一个很大的步骤

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

使事情进一步复杂化的是，我后来想添加PDF文件上传，使用相同的包/服务是有意义的，因为这会节省我很多时间，但我不知道是否存在这样一个通用的解决方案

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

还应注意的是，每当我尝试使用

toDataURL（）

时，都会出现以下错误：

SecurityError:未能对“HtmlCanvaseElement”执行“toDataURL”： 受污染的画布不得出口

非常适合它

您需要从画布（）中提取一个

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);
});

现在，服务器端可以是（但这实际上取决于您真正想要什么）：

如果您想支持pdf上传，只需将

application/pdf

添加到

allowedFileTypes

或创建一个单独的指令来授权pdf上传

---

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

只说它保存为“未定义”，并且它从未在S3中显示。现在应该修复，但这取决于您选择的文件名。

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";
  }
});