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

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

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

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

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

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

Ответ 1

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

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

то я использовал эту идею Преобразовать URI данных в файл, а затем добавить в FormData

а вместо обычного POST может быть запрос xhr с формой data to amazon, и вы закончили

Ответ 2

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

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

Ответ 3

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

canvas.toDataURL();

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

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

Также смотрите эту библиотеку: http://www.nihilogic.dk/labs/canvas2image/