Guardar imagen de lienzo PNG en almacenamiento HTML5 (JAVASCRIPT)?

Question

Estoy desarrollando una extensión de cromo.

Abro un archivo de imagen en lienzo, le aplico algunos cambios, luego intento guardarlo en la api del sistema de archivos HTML5.

En primer lugar me da la DataURL del lienzo:

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

A continuación, sólo los datos:

var image64 = dataURL.replace(/data:image\/png;base64,/, ''); 

Entonces hago un Blob.

var bb = new BlobBuilder(); 
    bb.append(image64); 
    var blob = bb.getBlob('image/png'); 

Luego solicito el sistema de archivos con la siguiente función onInitFs();

function onInitFs(fs) { 
     fs.root.getFile('image.png', {create: true}, function(fileEntry) { 
     // Create a FileWriter object for our FileEntry (log.txt). 
     fileEntry.createWriter(function(fileWriter) { 
     //WRITING THE BLOB TO FILE 
     fileWriter.write(blob); 
     }, errorHandler); 
     }, errorHandler); 
    } 

    window.requestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs, errorHandler); 

Esto se traduce en un archivo dañado de escribirse en el sistema de archivos.

No sé qué más puedo hacer para que esto funcione.

Podría alguien guiarme en la dirección correcta.

Las siguientes son algunas de las fuentes de las funciones que estoy usando para realizar esta tarea.

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method

http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty

Gracias!

Answer 1

Parece que está escribiendo directamente la representación de base64 en el disco. Primero debes decodificarlo.

Answer 2

Me había estado preguntando lo mismo y eché un vistazo a encontrar una respuesta.
Por lo que puedo decir tienes que convertir la cadena en bruto que obtienes de un atob a un unit8array y luego puedes agregarlo a un blob.
Aquí hay un ejemplo que convierte una imagen en un lienzo y luego los datos del lienzo en un blob y luego el tercer src de imágenes se establece en el uri del blob ... usted debería poder agregar el fs de allí ....
http://jsfiddle.net/PAEz/XfDUS/
..muerzo por no poner el código aquí, pero para ser sincero no pude encontrar la manera de hacerlo;) y de todos modos, JSFiddle es una buena manera de jugar con él.

Referencias
https://gist.github.com/1032746
http://code.google.com/p/html5wow/source/browse/src/demos/photo-gallery/js/utils.js
Get image data in JavaScript?
http://jsdo.it/tsmallfield/typed_array

Answer 3

Usted quiere HTMLCanvasElement.toBlob y luego escribir la burbuja a un sistema de archivos con la API del sistema de archivos del W3C, pero la mayoría de los navegadores no se han puesto en práctica todavía.

Answer 4

He encontrado una función que convierte una URL de datos en un blob.

Ideal para cuando necesite guardar una imagen de lienzo en el Sistema de archivos de seguridad. Funciona en Chrome 13.

function dataURItoBlob(dataURI, callback) { 
    // convert base64 to raw binary data held in a string 
    // doesn't handle URLEncoded DataURIs 
    var byteString = atob(dataURI.split(',')[1]); 

    // separate out the mime component 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0] 

    // write the bytes of the string to an ArrayBuffer 
    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 

    // write the ArrayBuffer to a blob, and you're done 
    var bb = new window.WebKitBlobBuilder(); // or just BlobBuilder() if not using Chrome 
    bb.append(ab); 
    return bb.getBlob(mimeString); 
}; 

Uso:

window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs){ 
    fs.root.getFile("image.png", {create:true}, function(fileEntry) { 
     fileEntry.createWriter(function(fileWriter) { 
      fileWriter.write(dataURItoBlob(myCanvas.toDataURL("image/png"))); 
     }, errorHandler); 
    }, errorHandler); 
}, errorHandler); 

trail Fuente:

http://mustachified.com/master.js
través http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031243.html
través https://bugs.webkit.org/show_bug.cgi?id=51652
través http://code.google.com/p/chromium/issues/detail?id=67587

Answer 5

allí Ahora es un canvas.toBlob() polyfill: https://github.com/eligrey/canvas-toBlob.js
Otro enlace interesante: https://github.com/eligrey/BlobBuilder.js

Así que con éstos se convierten en fácil de guardar la imagen del lienzo:

<script type="text/javascript" src="https://raw.github.com/eligrey/BlobBuilder.js/master/BlobBuilder.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.min.js"></script> 
... 
canvas.toBlob(function(blob) { 
    fileWriter.write(blob); 
}, "image/png"); 

Aquí hay un pequeño ejemplo de uso del FileSaver: http://jsfiddle.net/JR5XE/