tải lên dữ liệu canvas vào s3

Question

Bây giờ kể từ khi amazon đã bật CORS Tôi đã tự hỏi nếu điều này là có thể.

Có thể html trực tiếp canvas dữ liệu (trên trình duyệt của khách hàng) được chuyển đổi thành something và được tải lên s3 trực tiếp không?

Tôi chắc chắn tôi có thể thực hiện yêu cầu PUT thành amazon nhưng yêu cầu File.

Tôi có thể nhận được base64 dữ liệu hình ảnh được mã hóa hoặc thậm chí là Blob nhưng có cách nào để lưu hình ảnh này dưới dạng ảnh S3 từ trình duyệt của khách hàng không?

Có cách nào để chuyển đổi canvas thành File để tôi có thể thực hiện yêu cầu PUT hoặc cách amazon hiểu Blob và lưu nó dưới dạng hình ảnh không?

Answer 1

Có một phương pháp đăng bài cũ để tải dữ liệu từ trình duyệt lên s3

http://s3.amazonaws.com/doc/s3-example-code/post/post_sample.html

sau đó tôi đã sử dụng ý tưởng này Convert Data URI to File then append to FormData

và thay vì bình thường POST có thể là một yêu cầu XHR với formdata để amazon và bạn đã làm xong

Answer 2

Cách dễ nhất để tiết kiệm vải là để chuyển nó sang base64:

canvas.toDataURL(); 

hoặc bạn có thể đặt loại hình ảnh qua đối số:

canvas.toDataURL("image/png"); 
canvas.toDataURL("image/jpeg"); 
// etc 

Cũng xem lib này: http://www.nihilogic.dk/labs/canvas2image/

Answer 3

Đây là những gì làm việc cho tôi:

var canvas = document.getElementById("imagePreviewChatFooter"); 
        var dataUrl = canvas.toDataURL("image/jpeg"); 
        var blobData = dataURItoBlob(dataUrl); 
        var fileName = file.name; 
        var params = {Key: fileName, ContentType: file.type, Body: blobData}; 
        bucket.upload(params, function (err, data) { 
         console.log(data); 
         console.log(err ? 'ERROR!' : 'UPLOADED.'); 
        }); 

VÀ

function dataURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); 
}