0

我的页面通过单击按钮复制用户 html5 画布：

var canvasData;

$( "#button" ).click(function() {
    canvasData = canvas.toDataURL("image/png");
    // upload canvasData here...
});

我现在需要使用精细上传器将其上传到我的 s3 存储桶。在文档中它提到我可以上传 blob：

addBlobs (canvasData[, params[, endpoint]]);

我将如何最好地集成它以保存并取回 tempLink？我会像使用普通选择的文件一样使用下面的 S3 结构和签名、请求等吗？这个链接如何addBlobs？

$("#fine-uploader").fineUploaderS3({
    request: {
        endpoint: '{ YOUR_BUCKET_NAME }.s3.amazonaws.com'
        accessKey: '{ YOUR_ACCESS_KEY }'
    },
    signature: {
        endpoint: '/s3/signature'
    },
    uploadSuccess: {
        endpoint: '/s3/success'
    },
    iframeSupport: {
        localBlankPagePath: '/success.html'
    }
}).on('complete', function(event, id, name, response) {
    if (response.success) {
        console.log(response.tempLink);
    }
});
4

1 回答 1

0

最简单的方法是使用toBlobcanvas 元素上的方法。但是，这没有广泛的浏览器支持。 也许我们会在某个时候公开将画布转换为 blob 的内部代码（对这种情况进行投票）。现在，您可以看看这是如何在缩放模块中完成的，并在您的 Web 应用程序中使用它来将画布转换为 blob。

总结一下：

  1. 如果toBlob存在HTMLCanvasElement用于将画布转换为 blob 的用途。跳至步骤 6。
  2. 如果toBlob不可用，则将画布转换为数据 URI
  3. 使用 . 解码数据 URI 的 base64 部分atob。
  4. 将解码后的 base64 字符串转换为类型化数组
  5. 使用 blob 构造函数或（对于较旧的浏览器）BlobBuilder将类型化数组转换为 blob。
  6. 将 blob 传递给 Fine Uploader 的addBlobs方法。
于 2014-05-21T16:38:30.340 回答