Загрузка данных холста в s3

Question

Теперь, когда амазонка включилась CORS Мне было интересно, возможно ли это.

Может ли html canvas данные (в браузере клиента) быть преобразованы в something и загружены непосредственно на s3?

Я уверен, что могу сделать запрос на амазонку PUT, но для этого требуется File.

Я могу получить base64 данные кодированного изображения или даже Blob, но есть ли способ сохранить это как изображение в S3 из браузера клиента?

Есть ли способ, чтобы преобразовать canvas в File так, что я могу сделать PUT запрос или способом, которым амазонка понимает Blob и сохраняет его как изображение?

Answer 1

Существует старый метод отправки для загрузки данных из браузера в s3

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

тогда я использовал эту идею Convert Data URI to File then append to FormData

и вместо нормального POST может быть запросом XHR с данными формы на Амазонку, и вы сделали

Answer 2

Самый простой способ сохранить холст, чтобы преобразовать его в base64:

canvas.toDataURL(); 

или вы можете установить тип изображения с помощью аргумента:

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

смотреть Также этот LIB: http://www.nihilogic.dk/labs/canvas2image/

Answer 3

Это то, что работает для меня:

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

И

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