new - HTML5/Javascript-DataURL a Blob y Blob a DataURL

image to data url javascript

Question

Tengo un DataURL de un lienzo que muestra mi cámara web. Convierto esta dataURL en un blob usando la respuesta de Matt desde aquí: ¿Cómo convertir dataURL en un objeto de archivo en javascript?

¿Cómo puedo convertir este blob de nuevo en el mismo DataURL? He pasado un día investigando esto y me sorprende que esto no se documente mejor, a menos que esté ciego.

EDIT: hay

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

pero solo devuelve una URL muy corta que parece apuntar a un archivo local, pero necesito enviar los datos de la cámara web a través de una red.

Answer 1

No importa, terminó trabajando después de seguir las instrucciones de este hilo Mostrar imagen de blob usando javascript y websockets y hacer que mi servidor envíe BinaryWebSocketFrames sin modificar (todavía).

Ahora todavía estoy luchando contra el mal rendimiento del lienzo (<1fp) pero eso podría ser objeto de un nuevo hilo.

Answer 2

Usa mi código para convertir entre dataURL y objeto blob en javascript. (Mejor que el código en su enlace.)

//**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);
});