javascript - 尝试使用HTML5文件系统将canvas PNG数据url保存到磁盘，但是当我作为URL检索时，它无效

我从 Canvas 上获取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()。但是图像在网页上显示为残破的图像图标。我在做什么错了？

最佳答案

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

Chrome将来还会提供canvas.toBlob，但目前Chrome浏览器中尚不支持ojit_code。

示范http://jsfiddle.net/GaLRS/