是否将PNG画布图像保存到HTML5存储（JAVASCRIPT）？

我正在开发一个chrome扩展

我在画布中打开一个图像文件，对其应用一些更改，然后尝试将其保存到HTML5文件系统api

首先，我从画布获取dataURL：

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

然后，只需数据：

    var image64 = dataURL.replace(/data:image\/png;base64,/, '');

然后我做一个斑点

    var bb = new BlobBuilder();
    bb.append(image64);
    var blob = bb.getBlob('image/png');

然后我使用以下函数onInitFs（）请求文件系统

这会导致将损坏的文件写入文件系统

我不知道我还能做些什么来让这一切顺利进行

有人能给我指一下正确的方向吗

下面是我用来完成这项任务的函数的一些来源

---

谢谢大家!

您似乎直接将base64表示写入磁盘。你需要先对它进行解码。

我一直在想同样的事情，并试图找到答案。
据我所知，您必须将从atob获得的原始字符串转换为unit8array，然后将其附加到blob。
下面的示例将图像转换为画布，然后将画布中的数据转换为blob，然后将第三个图像src设置为blob的uri……您应该能够从那里添加fs内容……

…很抱歉没有把代码放在这里，但老实说，我不知道怎么写；）总之，JSFIDLE是一种很好的使用它的方法

参考文献

---

您需要

htmlcanvaseElement.toBlob

，然后使用W3C文件系统API将blob写入文件系统，但大多数浏览器尚未实现它。

我发现了一个将数据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);
};

源跟踪：

通过
通过

---

通过

现在有了画布。toBlob（）polyfill:
其他有趣的链接：

因此，使用这些工具可以很容易地从画布保存图像：

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

...
canvas.toBlob（函数（blob）{
fileWriter.write（blob）；
}，“图像/png”）；

---

这里有一个使用FileSaver的小例子：

如果像你这样的人会在我的硬盘上随机存储5MB的数据，我不喜欢HTML5的发展方向……为了测试的目的，这个数字变得很大。我一定会降低这个数字。我认为未来的计划是，如果应用程序试图使用您计算机中的存储，它将首先请求用户的许可。但是现在，您可以在清单中指定“unlimitedStorage”，并且可以存储任意数量的数据。：）非常感谢。有没有一个函数我可以调用来解码它？嗨。在创建blob之前，我调用了在image64变量上找到的decode64（）函数。这不起作用。我必须解码blob或image64变量吗？我也尝试从这里使用解码器：但没有得到任何结果。这可能吗？我使用两个本机函数atob（）和btoa（）编码解码base64…浏览器中存在不支持这些的多边形填充。如何从文件系统中读取和显示该图像？@sreimer

WebKitBlobBuffer和BlobBuilder不推荐使用

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

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