télécharger des données de toile à s3

Question

Maintenant que l'amazon a activé CORS je me demandais si cela est possible.

Les données html canvas (sur le navigateur client) peuvent-elles être converties en something et téléchargées directement sur s3?

Je suis sûr que je peux faire une demande PUT à Amazon mais cela nécessite un File.

Je peux obtenir base64 données d'image codées ou même un Blob mais est-il un moyen de sauvegarder cela comme une image à S3 à partir du navigateur client?

est-il un moyen de convertir canvas-File afin que je puisse faire une demande PUT ou d'une manière qui amazon comprend Blob et il enregistre comme une image?

Answer 1

Il existe une ancienne méthode de publication de données depuis le navigateur vers s3

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

alors je l'ai utilisé cette idée Convert Data URI to File then append to FormData

et au lieu de POST normal, il peut y avoir une demande de XHR avec le formdata à amazon et vous êtes fait

Answer 2

La meilleure façon de sauver la toile est de le convertir en base64:

canvas.toDataURL(); 

ou vous pouvez définir le type d'image via l'argument:

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

montre également cette lib: http://www.nihilogic.dk/labs/canvas2image/

Answer 3

C'est ce qui a fonctionné pour moi:

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

ET

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