Запись двоичных файлов HTML5 с Base64

Question

как вы знаете, HTML 5 предлагает хороший FileAPI.Я построил систему, в которой пользователь получает строку в кодировке Base64, которая должна быть записана на диск (имеет соответствующие разрешения, потому что это приложение Google Chrome).Мой код следующий: (немного очищен от ненужных вещей)

function onInitFs(fs){      
  fs.root.getFile(fileName, {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      var bb = new window.WebKitBlobBuilder(); 
      bb.append( atob(dataInBase64Format));
      fileWriter.write(bb.getBlob());           
    }, errorHandler);
    console.log( fileEntry.toURL());
  }, errorHandler);
}

Тем не менее, мой исходный размер файла: 6302446 байт, и сервер отправил их как Base64 в 8403264 байт, однако сохраненный файл 9242715байт.Конечно, я понял, что что-то не так, и я посмотрел файл, и это просто хорошая строка.Не появляются причудливые символы.Я предполагаю, что я пишу в текстовом режиме и atob просто конвертирует его в другую строку;который мне нужно преобразовать в двоичный формат (возможно, в массив?) и заставить мой fileWriter писать в двоичном режиме, а не в текстовом режиме.Я искал в Интернете, но не смог найти решение.Я нашел этот вопрос в StackOverflow Могут ли методы Google Chrome Base64 обрабатывать двоичные данные из File API? , но это не помогло мне.

Как преобразовать строку Base64 в правильнуюструктура данных и мой fileWriter, чтобы написать это?

Answer 1

Я написал расширение, которое делает снимок экрана с помощью Chrome, помещает его на холст, изменяет его размер, а затем сохраняет данные холста с помощью API файловой системы.Не уверен, что это точно так же, как у вас, но, возможно, будет достаточно большей части кода?

В этом случае я предполагаю, что мой dataURI (например, myCanvas.toDataURL("image/png")) будет того же формата Base64, что и ваш dataInBase64Format.

Функция:

// canvas.toBlob is not implemented in Chrome yet! So we have to build the blob ourselves.
// Derived from 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

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();
    bb.append(ab);
    return bb.getBlob(mimeString);
}

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

// Save image data
function onInitFs(fs){
    fs.root.getFile(fileName, {create:true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
            fileWriter.write(dataURItoBlob(myCanvas.toDataURL("image/png")));
        }, fileErrorHandler);
    }, fileErrorHandler);
}, fileErrorHandler);