Der Versuch, mit HTML5-Dateisystem Leinwand PNG-Daten-URL auf die Festplatte zu speichern, aber wenn ich als URL abrufen, dann ist es ungültig

Question

ich die Base64-codierte Bild der Leinwand bilden, wie:

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

Dann habe ich es in Daten drehen wie folgt aus:

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

Dann auf das Dateisystem über ich es schreiben:

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

versuche ich es als src eines Bildes wie t einstellen sein:

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

, dass die Datei schreibt und ich bin in der Lage, es zu finden und eine URL zu erhalten (indem sie sie lesen und mit der Veranstaltung: event.toURL(). Aber das Bild wird als ein gebrochenes Bildsymbol auf der Webseite angezeigt. Was mache ich falsch?

Answer 1

data ist eine Zeichenkette. Wenn Sie sie an Blob übergeben, werden die Binärdaten diese Zeichenkette in UTF-8-Codierung sein. Sie wollen Binärdaten keine Zeichenfolge.

Sie können es tun:

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

Es ist auch canvas.toBlob in Zukunft aber derzeit nicht in Chrome.

Demo http://jsfiddle.net/GaLRS/