Question

我的页面会在点击按钮时生成用户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);
    }
});

Answer 1

最简单的方法是在canvas元素上使用toBlob方法。但是，这没有广泛的浏览器支持。 Perhaps we will expose the internal code that converts a canvas to a blob at some point（对此案进行投票）。目前，您可以拥有look at how this is done in the scaling module，并在您的网络应用中使用此功能将画布转换为blob。

总结：

如果toBlob上有HTMLCanvasElement用于将画布转换为blob。跳到第6步。
如果toBlob不可用，请将画布转换为数据URI
使用atob解码数据URI的base64部分。
将解码后的base64字符串转换为类型化数组
使用blob构造函数或（对于旧浏览器）BlobBuilder将类型化数组转换为blob。
将blob传递给Fine Uploader＆＃39; addBlobs方法。

Fine Uploader - 添加Blob（canvas.toDataURL） - 上传到S3

1 个答案: