carica dati su canvas su s3

Question

Da quando Amazon ha attivato CORS, mi chiedevo se fosse possibile.

I dati HTML canvas (sul browser del client) possono essere convertiti in un something e caricati direttamente in s3?

Sono sicuro di poter effettuare una richiesta su Amazon ma che richiede uno File.

Posso ottenere dati immagine codificati base64 o anche un Blob ma c'è un modo per salvarlo come immagine su S3 dal browser client?

C'è un modo per convertire canvas-File modo che io possa fare una richiesta PUT o un modo che Amazon capisce Blob e lo salva come immagine?

Answer 1

C'è un vecchio metodo per caricare i dati dal browser a s3

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

poi ho usato questa idea Convert Data URI to File then append to FormData

invece di normale POST non ci può essere una richiesta XHR con il formdata ad Amazon e si è fatto

Answer 2

Il modo più semplice per risparmiare tela è per convertirlo in Base64:

canvas.toDataURL(); 

oppure si può impostare il tipo di immagine tramite argomento:

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

guardare anche questo lib: http://www.nihilogic.dk/labs/canvas2image/

Answer 3

Questo è ciò che ha funzionato per me:

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

E

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