我从 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"} );
还有 canvas.toBlob
将来可用,但目前在 Chrome 中不可用。
关于javascript - 尝试使用 HTML5 文件系统将 canvas PNG 数据 url 保存到磁盘,但是当我检索为 URL 时,它无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17332071/