html5保存png,将PNG画布图像保存到HTML5存储(JAVASCRIPT)？

我发现一个将数据URL转换为blob的功能.

当您需要将画布图像保存到沙盒的FileSystem时非常适用.适用于Chrome 13.

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(); // or just BlobBuilder() if not using Chrome

bb.append(ab);

return bb.getBlob(mimeString);

};

用法：

window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs){

fs.root.getFile("image.png", {create:true}, function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {

fileWriter.write(dataURItoBlob(myCanvas.toDataURL("image/png")));

}, errorHandler);

}, errorHandler);

}, errorHandler);

源路径：