Enregistrer l'image en toile PNG dans le stockage HTML5 (JAVASCRIPT)?

Je suis en train d'élaborer une extension chrome.

- Je ouvrir un fichier image dans la toile, j'applique quelques modifications, alors je suis en train de l'enregistrer sur le HTML5 système de fichiers de l'api.

J'ai d'abord obtenir le dataURL de la toile:

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

Puis il suffit de données:

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

Puis-je faire un Blob.

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

Puis-je demander au système de fichiers avec la fonction suivante 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);

Présente les résultats dans un fichier corrompu d'être écrites dans le système de fichiers.

Je ne sais pas ce que je peux faire pour faire ce travail.

Quelqu'un pourrait-il svp me guider dans la bonne direction.

Les éléments suivants sont quelques-uns des sources pour les fonctions, je suis aide à accomplir cette tâche.

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

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

Merci!

source d'informationauteur Rob

  1. 10

    J'ai trouvé une fonction qui convertit les données d'URL à un objet blob.

    Idéal pour quand vous avez besoin d'enregistrer une toile d'image pour le bac à sable du système de fichiers. Fonctionne dans 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);
};

    Utilisation:

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

    Source trail:

    http://mustachified.com/master.js

    via http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031243.html

    via https://bugs.webkit.org/show_bug.cgi?id=51652

    via http://code.google.com/p/chromium/issues/detail?id=67587

  2. 5

    Il y a maintenant une toile.toBlob() polyfill: https://github.com/eligrey/canvas-toBlob.js

    Autre lien intéressant: https://github.com/eligrey/BlobBuilder.js

    Ainsi, il devient facile de sauvegarder l'image de la toile:

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

    Voici un petit exemple d'utilisation de la FileSaver: http://jsfiddle.net/JR5XE/

  3. 1

    Vous semblent être directement de l'écriture de la représentation base64 sur le disque. Vous avez besoin de le décoder en premier.

  4. 1

    J'avais été demandais la même chose et avait un regard à trouver la réponse.

    À partir de ce que je peux dire, vous devez convertir le raw chaîne, que vous obtenez à partir d'un atob à un unit8array et puis vous pouvez l'ajouter à un blob.

    Voici un exemple qui convertit une image d'une zone de dessin, puis les données de la toile pour une goutte, puis le troisième images src est définie à l'uri de l'objet blob....vous devriez être en mesure d'ajouter de la fs choses à partir de là....

    http://jsfiddle.net/PAEz/XfDUS/

    ..désolé de ne pas mettre le code ici, mais pour être honnête, je ne pourrais pas comprendre comment 😉 et de toute façon, JSFiddle est une façon agréable de jouer avec elle.

    Références

    https://gist.github.com/1032746

    http://code.google.com/p/html5wow/source/browse/src/demos/photo-gallery/js/utils.js

    Obtenir des données d'image en JavaScript?

    http://jsdo.it/tsmallfield/typed_array

  5. 0

    Vous voulez HTMLCanvasElement.toBlobpuis d'écrire le blob dans un système de fichiers avec le W3C système de fichiers de l'API, mais la plupart des navigateurs ne l'ai pas encore mise en oeuvre.