将PNG画布图像保存到HTML5存储(JAVASCRIPT)
Save PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?
我正在开发一个chrome扩展。
我在画布中打开一个图像文件,对其进行一些更改,然后尝试将其保存到HTML5文件系统api中。
首先,我从画布中获取数据URL:
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-方法
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-文件创建空
谢谢!
我发现了一个将数据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
现在有一个画布.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
您需要HTMLCanvasElement.toBlob
,然后使用W3C文件系统API将blob写入文件系统,但大多数浏览器尚未实现它。
- HTML5在画布中加载较小的图像并保存实际大小的图像
- 如何在jquery、javascript、HTML5中以base64字符串保存为(PDF、doc、xls、png.)
- HTML5数据库保存了详细信息以及一个按钮
- 如何将jQuery克隆的文本输入保存到cookie或html5存储中
- 无法使用HTML5 Web存储保存布尔值的解决方法
- 如何保存和加载HTML5画布到&来自localStorage
- 在用户离开或关闭页面之前保存HTML5视频currentTime
- 如何用我在HTML5画布上绘制的src保存图像文件
- 如何使用纯javascript或jQuery将HTML5画布屏幕作为png图像保存到项目的特定文件夹中
- HTML5画布-保存和恢复拖放画布状态
- 如何将html5画布保存到服务器
- 将表数据保存到 HTML5 LocalStorage
- 将图像从 Html5 画布保存到手机存储
- 正在保存HTML5画布数据
- 减缓用户下载/保存html5视频的速度
- 保存HTML5
- 试图保存html5画布,但它是空白的
- 如何在php中保存html5画布图像到数据库
- 如何在android Phonegap的android SD卡上保存HTML5画布图像
- 保存HTML5画布与升级