Пытаясь сохранить файл canvas PNG на диске с файловой системой HTML5, но когда я получаю URL-адрес, он недействителен

Я получаю изображение с кодировкой base64 в холсте как:

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

Затем я превращаю его в такие данные:

//Remove the beginning identifier and use Chrome/Firefox?safari built int base64Decoder
var data = atob( dataURL.substring( "data:image/png;base64,".length ) );

Затем я пишу его в файловую систему через:

event.createWriter(
    function(writerEvent)
    {
        //The success handler
        writerEvent.onwriteend = function(finishEvent)
        {
            ...
        };

        //Error handler
        writerEvent.onerror = settings.error;

        // Create a new Blob
        var blob = new Blob( [ data ], { type: "image/png" } );

        //Write it into the path
        writerEvent.write( blob );
    }
}

Я пытаюсь установить его как src изображения следующим образом:

document.getElementById( "saved" ).src = event.toURL();

Это записывает файл, и я могу его найти и получить url (читая его и используя событие: event.toURL(). Но изображение отображается как значок с поврежденным изображением на веб-странице. Что я делаю неправильно

Ответ 1

data - это строка, поэтому, когда вы передаете ее в blob, двоичные данные будут этой строкой в ​​кодировке UTF-8. Вы хотите двоичные данные не строка.

Вы можете сделать это как:

var canvas = document.createElement("canvas");


var dataURL = canvas.toDataURL( "image/png" );
var data = atob( dataURL.substring( "data:image/png;base64,".length ) ),
    asArray = new Uint8Array(data.length);

for( var i = 0, len = data.length; i < len; ++i ) {
    asArray[i] = data.charCodeAt(i);    
}

var blob = new Blob( [ asArray.buffer ], {type: "image/png"} );

Существует также canvas.toBlob, доступный в будущем, но не в настоящее время в Chrome.

Демо http://jsfiddle.net/GaLRS/