web-dev-qa-db-fra.com

HTML5/Javascript - DataURL à Blob et Blob à DataURL

J'ai un DataURL d'une toile qui montre ma webcam. Je transforme ce dataURL en blob en utilisant la réponse de Matt d'ici: Comment convertir dataURL en fichier objet en javascript?

Comment reconvertir ce blob dans le même DataURL? J'ai passé une journée à faire des recherches à ce sujet et je suis étonné que cela ne soit pas mieux documenté, sauf si je suis aveugle.

EDIT: Il y a 

var urlCreator = window.URL || window.webkitURL; 
var imageUrl = urlCreator.createObjectURL(blob);

mais il ne renvoie qu'une URL très courte qui semble pointer vers un fichier local, mais je dois envoyer les données de la webcam via un réseau. 

javascripthtml5blob
19
spacecoyote

Ce n'est pas grave, il a fini par fonctionner après avoir suivi les instructions de ce fil Afficher une image d'un blob à l'aide de javascript et de websockets et faire en sorte que mon serveur transmette BinaryWebSocketFrames brut (encore) non modifié.

Maintenant, je me bats toujours contre les mauvaises performances de la toile (<1fp) mais cela pourrait faire l’objet d’un nouveau thread.

1
spacecoyote

Utilisez mon code pour convertir des objets dataURL et blob en javascript. (mieux que le code dans votre lien.)

//**dataURL to blob**
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

//**blob to dataURL**
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}

//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
    console.log(dataurl);
});
43
cuixiping