Сохранить изображение холста PNG в хранилище HTML5 (JAVASCRIPT)?

Question

Я разрабатываю расширение для Chrome.

Я открываю файл изображения на холсте, применяю к нему некоторые изменения, затем пытаюсь сохранить его в API файловой системы HTML5.

Сначала я получаю dataURL с холста:

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

Затем только данные:

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

Затем я создаю BLOB-объект.

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

Затем я запрашиваю файловую систему с помощью следующей функции 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, 51024, onInitFs, errorHandler);

Это приводит к записи поврежденного файла в файловую систему.

Я не знаючто еще я могу сделать, чтобы сделать эту работу.

Может ли кто-нибудь, пожалуйста, направить меня в правильном направлении.

Ниже приведены некоторые источники функций, которые я использую для выполнения этой задачи.

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

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

Спасибо!

Answer 1

Я нашел функцию, которая преобразует URL-адрес данных в BLOB-объект.

Отлично подходит для случаев, когда необходимо сохранить изображение холста в изолированной файловой системе.Работает в 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);
};

Использование:

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

Исходный след:

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

Answer 2

Теперь есть polyfill canvas.toBlob (): https://github.com/eligrey/canvas-toBlob.js
Другая интересная ссылка: https://github.com/eligrey/BlobBuilder.js

Итак, с их помощью легко сохранить изображение с холста:

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

Вот небольшой пример использования FileSaver: http://jsfiddle.net/JR5XE/

Answer 3

Мне было интересно то же самое, и я посмотрел, как найти ответ.
Из того, что я могу сказать, вы должны преобразовать необработанную строку, полученную из atob, в массив unit8, а затем добавить его вBLOB-объект.
Вот пример, который преобразует изображение в холст, а затем данные из холста в BLOB-объект, а затем для третьего src-изображений устанавливается значение URI BLOB-объекта .... вы должны иметь возможность добавитьfs вещи оттуда ....
http://jsfiddle.net/PAEz/XfDUS/
.. извините, что не поместил код здесь, но, честно говоря, я не мог понять, как;) и в любом случае, JSFiddle - хороший способ игратьit.

Ссылки
https://gist.github.com/1032746
http://code.google.com/p/html5wow/source/browse/src/demos/photo-gallery/js/utils.js
Получить данные изображения в JavaScript?
http://jsdo.it/tsmallfield/typed_array

Answer 4

Вы, похоже, непосредственно записываете представление base64 на диск.Вы должны сначала расшифровать его.

Answer 5

Требуется HTMLCanvasElement.toBlob, а затем записать большой двоичный объект в файловую систему с помощью API файловой системы W3C, но большинство браузеров еще не реализовали его.