将 PNG 画布图像保存到 HTML5 存储 (JAVASCRIPT)？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6431281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?
提问by Rob
I am developing a chrome extension.
我正在开发一个 chrome 扩展。
I open an image file in canvas, I apply some changes to it, then I am trying to save it to the HTML5 filesystem api.
我在画布中打开一个图像文件，对其进行一些更改，然后尝试将其保存到 HTML5 文件系统 api。
First I get the dataURL from the canvas:
首先，我从画布中获取 dataURL：
var dataURL = canvas.toDataURL('image/png;base64');
Then just the data:
然后只是数据：
var image64 = dataURL.replace(/data:image\/png;base64,/, '');
Then I make a Blob.
然后我做了一个 Blob。
var bb = new BlobBuilder();
bb.append(image64);
var blob = bb.getBlob('image/png');
Then I request the file system with the following function onInitFs();
然后我使用以下函数 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);
This results in a corrupted file being written to the file system.
这会导致将损坏的文件写入文件系统。
I don't know what else I can do to make this work.
我不知道我还能做些什么来完成这项工作。
Could someone please guide me in the right direction.
有人可以指导我朝着正确的方向前进。
The following are some of the sources to the functions I am using to accomplish this task.
以下是我用来完成此任务的函数的一些来源。
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty
Thank You!
谢谢！
回答by Chris McFarland
I've found a function that converts a data URL to a blob.
我找到了一个将数据 URL 转换为 blob 的函数。
Great for when you need to save a canvas image to the sandboxed FileSystem. Works in Chrome 13.
非常适合需要将画布图像保存到沙盒文件系统的情况。适用于 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);
};
Usage:
用法：
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);
Source trail:
源码路径：
http://mustachified.com/master.js
via http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031243.html
via https://bugs.webkit.org/show_bug.cgi?id=51652
via http://code.google.com/p/chromium/issues/detail?id=67587
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
回答by idFlood
There is now a canvas.toBlob() polyfill: https://github.com/eligrey/canvas-toBlob.js
Other interesting link: https://github.com/eligrey/BlobBuilder.js
现在有一个 canvas.toBlob() polyfill：https: //github.com/eligrey/canvas-toBlob.js
其他有趣的链接：https: //github.com/eligrey/BlobBuilder.js
So with these it become easy to save image from canvas:
因此，使用这些可以轻松地从画布中保存图像：
<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");
Here is a little example using the FileSaver: http://jsfiddle.net/JR5XE/
这是一个使用 FileSaver 的小例子：http: //jsfiddle.net/JR5XE/
回答by Andrea
You seem to be directly writing the base64 representation to disk. You need to decode it first.
您似乎直接将 base64 表示写入磁盘。您需要先对其进行解码。
回答by PAEz
I had been wondering the same thing and had a look at finding an answer.
From what I can tell you have to convert the raw string you get from an atob to an unit8array and then you can append it to a blob.
Here's an example that converts an image to a canvas and then the data from the canvas to a blob and then the third images src is set to the uri of the blob....you should be able to add the fs stuff from there....
http://jsfiddle.net/PAEz/XfDUS/
..sorry to not put the code here, but to be honest I couldnt figure out how to ;) and anyways, JSFiddle is a nice way to play with it.
我一直在想同样的事情，并希望找到答案。
据我所知，您必须将从 atob 获得的原始字符串转换为 unit8array，然后才能将其附加到 blob。
这是一个将图像转换为画布的示例，然后将画布中的数据转换为 blob，然后将第三张图像 src 设置为 blob 的 uri....您应该能够从那里添加 fs 内容。 ...
http://jsfiddle.net/PAEz/XfDUS/
..很抱歉没有把代码放在这里，但说实话我不知道怎么做 ;) 无论如何，JSFiddle 是一种很好的使用方式。
References
https://gist.github.com/1032746
http://code.google.com/p/html5wow/source/browse/src/demos/photo-gallery/js/utils.js
Get image data in JavaScript?
http://jsdo.it/tsmallfield/typed_array
参考
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
回答by Eli Grey
You want HTMLCanvasElement.toBloband then write the blob to a filesystem with the W3C filesystem API, but most browsers haven't implemented it yet.
您想要HTMLCanvasElement.toBlob然后使用 W3C 文件系统 API 将 blob 写入文件系统，但大多数浏览器尚未实现它。
