将PNG画布图像保存到HTML5存储(JAVASCRIPT)?

| 我正在开发chrome扩展程序。 我在画布上打开一个图像文件,对其进行了一些更改,然后尝试将其保存到HTML5文件系统api。 首先,我从画布获取dataURL:
    var dataURL = canvas.toDataURL(\'image/png;base64\'); 
然后只是数据:
    var image64 = dataURL.replace(/data:image\\/png;base64,/, \'\');
然后我做一个Blob。
    var bb = new BlobBuilder();
    bb.append(image64);
    var blob = bb.getBlob(\'image/png\');
然后,我使用以下函数onInitFs()请求文件系统;
    function onInitFs(fs) {
      fs.root.getFile(\'image.png\', {create: true}, function(fileEntry) {
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function(fileWriter) {
        //WRITING THE BLOB TO FILE
        fileWriter.write(blob);
        }, errorHandler);
      }, errorHandler);
    }

    window.requestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs, errorHandler);
这导致损坏的文件被写入文件系统。 我不知道还能做些什么。 有人可以指导我朝正确的方向前进。 以下是我用来完成此任务的功能的部分来源。 http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method http://www.html5rocks.com/zh-CN/tutorials/file/filesystem/#toc-file-creatingempty 谢谢!     
已邀请:
        我找到了一个将数据URL转换为Blob的函数。 非常适合需要将画布图像保存到沙盒文件系统的情况。适用于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);
资料来源: http://mustachified.com/master.js 通过http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031243.html 通过https://bugs.webkit.org/show_bug.cgi?id=51652 通过http://code.google.com/p/chromium/issues/detail?id=67587     
        现在有一个canvas.toBlob()polyfill:https://github.com/eligrey/canvas-toBlob.js 其他有趣的链接:https://github.com/eligrey/BlobBuilder.js 因此,使用它们可以轻松地从画布保存图像:
<script type=\"text/javascript\" src=\"https://raw.github.com/eligrey/BlobBuilder.js/master/BlobBuilder.min.js\"></script>
<script type=\"text/javascript\" src=\"https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.min.js\"></script>
...
canvas.toBlob(function(blob) {
  fileWriter.write(blob);
}, \"image/png\");
这是一个使用FileSaver的小例子:http://jsfiddle.net/JR5XE/     
        您似乎正在直接将base64表示形式写入磁盘。您需要先对其进行解码。     
        我一直在想同样的事情,并寻找答案。 据我所知,您必须将从atob获得的原始字符串转换为unit8array,然后可以将其附加到blob。 这是一个将图像转换为画布,然后将数据从画布转换为Blob,然后将第三个图像src设置为Blob的uri的示例。...您应该能够添加fs的内容从那里.... http://jsfiddle.net/PAEz/XfDUS/ ..对不起,没有在这里放代码,但是老实说,我无法弄清楚该如何做;)无论如何,JSFiddle是一种很好的方法。 参考文献 https://gist.github.com/1032746 http://code.google.com/p/html5wow/source/browse/src/demos/photo-gallery/js/utils.js 获取JavaScript中的图像数据? http://jsdo.it/tsmallfield/typed_array     
        您需要“ 7”,然后使用W3C文件系统API将Blob写入文件系统,但是大多数浏览器尚未实现它。     

要回复问题请先登录注册