将PNG画布图像保存到HTML5存储（JAVASCRIPT）？ [英] Save PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?

问题描述

我正在开发一个chrome扩展程序。

我在canvas中打开一个图像文件，我应用一些更改，然后我试图将其保存到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）{ 
 //为我们的FileEntry（log.txt）创建FileWriter对象
 fileEntry.createWriter（function（fileWriter）{
 //将BLOB写入文件
 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  
 
 
 
 $ 
解决方案
我找到了一个将数据URL转换为blob的函数。
 
 
 
当您需要将画布图像保存到沙盒文件系统时非常适用。适用于Chrome 13。
 函数dataURItoBlob（dataURI，callback）{
 //将base64转换为原始二进制数据in a string 
 //不处理URLEncoded DataURIs 
 var byteString = atob（dataURI.split（'，'）[1]）; 
 
 //分离mime组件
 var mimeString = dataURI.split（'，'）[0] .split（'：'）[1] .split [0] 
 
 //将字符串的字节写入ArrayBuffer 
 var ab = new ArrayBuffer（byteString.length）; 
 var ia = new Uint8Array（ab）; 
 for（var i = 0; i  ia [i] = byteString.charCodeAt（i）; 
} 
 
 //将ArrayBuffer写入一个blob，并完成
 var bb = new window.WebKitBlobBuilder（）; //或者只是BlobBuilder（）如果不使用Chrome 
 bb.append（ab）; 
 return bb.getBlob（mimeString）; 
}; 
  
用法：
 code> 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  < br> 
 via  https://bugs.webkit.org/show_bug.cgi?id=51652 
 
，通过 http://code.google.com/p/ chromium / issues / detail？id = 67587  
 
I am developing a chrome extension.

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. 

First I get the dataURL from the canvas:
    var dataURL = canvas.toDataURL('image/png;base64'); 
Then just the data:
    var image64 = dataURL.replace(/data:image\/png;base64,/, '');
Then I make a 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();
    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://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty

Thank You!
解决方案
I've found a function that converts a data URL to a blob.

Great for when you need to save a canvas image to the sandboxed FileSystem. Works in 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

                        
这篇关于将PNG画布图像保存到HTML5存储（JAVASCRIPT）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！