10

私はクロム拡張機能を開発しています。

キャンバスで画像ファイルを開き、いくつかの変更を適用してから、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(); を使用してファイル システムを要求します。

    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

5

現在、canvas.toBlob（）ポリフィルがあります：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

base64 表現をディスクに直接書き込んでいるようです。最初にデコードする必要があります。

于 2011-06-21T20:38:28.807 に答える
0

必要HTMLCanvasElement.toBlobに応じて、W3CファイルシステムAPIを使用してblobをファイルシステムに書き込みますが、ほとんどのブラウザはまだそれを実装していません。

于 2011-07-13T00:33:22.803 に答える