5

私はkineticjsライブラリを使用してhtml5キャンバス上に図形を作成しました。次に、キャンバスを画像としてローカルシステムのハードドライブに保存します。plsはKineticJSライブラリを使用してそれを達成する方法を教えてくれます。

4

1 に答える 1

3

キャンバスを選択した後 (document.getElementById のようなものを使用すると思います)、以下を呼び出してキャンバスを dataURL に変換できるはずです。

その URL を取得したら、それを別のブラウザ ウィンドウで開き、標準の右クリック -> [名前を付けて画像を保存] を実行して、JPG/PNG などとして保存します。

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

プログラムでイメージをドライブに保存できるかどうかはわかりませんが、セキュリティ上の制約から非常に疑わしいと思います。

プログラムによるファイル システムへのアクセスの詳細については、この HTML5 ファイル システム リファレンス サイトを参照してください。

http://www.html5rocks.com/en/tutorials/file/filesystem/

KinectJS ステージ キャンバス要素の dataURL の取得に関する詳細については、以下のスニペット / url を参照してください。

<script>
  stage.toDataURL({
    callback: function(){
      // do something with the data url
    },
    mimeType: 'image/jpeg',
    quality: 0.5
  });
</script>

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/

于 2013-02-25T08:44:09.047 に答える