10

我正在开发一个 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/en/tutorials/file/filesystem/#toc-file-creatingempty

谢谢你！

4

5 回答 5

10

我找到了一个将数据 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

于 2011-08-15T23:34:34.830 回答
5

现在有一个 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/

于 2012-01-30T19:26:31.240 回答
1

我一直在想同样的事情，并看看找到答案。
据我所知，您必须将从 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

于 2011-07-01T13:56:11.890 回答
1

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

于 2011-06-21T20:38:28.807 回答
0

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

于 2011-07-13T00:33:22.803 回答