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

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

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

Сначала я получаю URL-адрес данных из холста:

    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, 5*1024*1024, onInitFs, errorHandler);

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

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

Не мог бы кто-нибудь направить меня в правильном направлении.

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

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl- метод

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

Спасибо!