cercando di salvare tela PNG dati url su disco con HTML5 filesystem, ma quando posso recuperare come URL, è invalido

Question

ottengo l'immagine con codifica Base64 formano la tela come:

var dataURL = canvas.toDataURL("image/png"); 

Poi mi rivolgo in dati in questo modo:

//Remove the beginning identifier and use Chrome/Firefox?safari built int base64Decoder 
var data = atob(dataURL.substring("data:image/png;base64,".length)); 

Poi scrivo al filesystem via:

event.createWriter(
    function(writerEvent) 
    { 
     //The success handler 
     writerEvent.onwriteend = function(finishEvent) 
     { 
      ... 
     }; 

     //Error handler 
     writerEvent.onerror = settings.error; 

     // Create a new Blob 
     var blob = new Blob([ data ], { type: "image/png" }); 

     //Write it into the path 
     writerEvent.write(blob); 
    } 
} 

cerco di impostarlo come src di un'immagine come t la sua:

document.getElementById("saved").src = event.toURL(); 

che scrive il file e sono in grado di trovare e ottenere un URL (leggendolo e utilizzando l'evento: event.toURL(). Ma l'immagine mostra come icona di un'immagine spezzata sulla pagina web. Che cosa sto facendo di sbagliato?

Answer 1

data è una stringa, quindi quando si passa a BLOB, i dati binari saranno quella stringa nella codifica UTF-8. Vuoi dati binari non una stringa.

Si può fare così:

var canvas = document.createElement("canvas"); 


var dataURL = canvas.toDataURL("image/png"); 
var data = atob(dataURL.substring("data:image/png;base64,".length)), 
    asArray = new Uint8Array(data.length); 

for(var i = 0, len = data.length; i < len; ++i) { 
    asArray[i] = data.charCodeAt(i);  
} 

var blob = new Blob([ asArray.buffer ], {type: "image/png"}); 

C'è anche canvas.toBlob disponibile in futuro, ma attualmente non in Chrome.

Demo http://jsfiddle.net/GaLRS/