ファイルにhtml5キャンバス要素を保存する（ローカル）

Question

私はAndroid上でWebアプリケーションを作成しています。ユーザーがタッチイベントを使用したいものを描画できるHTML5 Canvasがあります。そして、私はこれをsdcardに保存したいので、ローカルで。そして、そのようなことをするためにサーバー側のスクリプト（PHPなど）を使用することはできません。

<canvas id="example" height=450 width=300></canvas> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="magictouch.js"></script> 

    <script> 

    var CanvasDrawr = function(options) { 

    var canvas = document.getElementById(options.id), 
    ctxt = canvas.getContext("2d"); 
    var img  = canvas.toDataURL("image/png"); 


    ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35); 
    ctxt.lineCap = options.lineCap || "round"; 
    ctxt.pX = undefined; 
    ctxt.pY = undefined; 

    var lines = [,,]; 
    var offset = $(canvas).offset(); 

    var self = { 
    //bind click events 
    init: function() { 

    canvas.addEventListener('touchstart', self.preDraw, false); 
    canvas.addEventListener('touchmove', self.draw, false); 

    }, 

    preDraw: function(event) { 
      $.each(event.touches, function(i, touch) { 
       var id = touch.identifier; 
       lines[id] = { x  : this.pageX - offset.left, 
       y  : this.pageY - offset.top, 
       color : options.color || ["black"] 
       }; 
    }); 

    event.preventDefault(); 
    }, 

    draw: function(event) { 
    var e = event, hmm = {}; 

    $.each(event.touches, function(i, touch) { 
     var id = touch.identifier; 
     var moveX = this.pageX - offset.left - lines[id].x, 
     moveY = this.pageY - offset.top - lines[id].y; 

     var ret = self.move(id, moveX, moveY); 
     lines[id].x = ret.x; 
     lines[id].y = ret.y; 
    }); 

    event.preventDefault(); 
    }, 

    move: function(i, changeX, changeY) { 
    ctxt.strokeStyle = lines[i].color; 
    ctxt.beginPath(); 
    ctxt.moveTo(lines[i].x, lines[i].y); 

    ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY); 
    ctxt.stroke(); 
    ctxt.closePath(); 

    return { x: lines[i].x + changeX, y: lines[i].y + changeY }; 
    } 
}; 

    return self.init(); 
    }; 

    $(function(){ 
var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example", size: 2 }); 
console.log('loaded'); 
     }); 

    </script> 
    </body> 

をしかし、私は、インターネット上で出会ったすべての例は、復号化し、画像としてcanvaを保存するために、サーバー上のPHPスクリプトを使用した：

私はmagictouch.js例を使用しています。そして、実際には、私のAndroidデバイス上で、私のsdcardで、HTML5/Javascriptだけを使ってそれをやりたがっています...

ありがとう。

Answer 1

ウェブページからファイルシステムにアクセスできないため、これは不可能です（ここではあまり役に立ちませんが、いくつかの場合を除いて）。

もちろん、このファイルを生成するためにサーバーを使用することをお勧めします。それは不可能なので、プラグインまたはJavaアプレットを使用してクライアント上で "ネイティブ"コードを実行する方法を見つけることができます。

Answer 2

ニヒロジックライブラリーをチェックしましたか？ http://www.nihilogic.dk/labs/canvas2image/

toDataUrl（）関数を使用すると、醜い名前の画像が表示されることがありますが、まだ画像が表示されます。

またdownloadify使用することができますが、それはフラッシュを使用して、私はhttps://github.com/dcneiner/Downloadify

はまた、私は、kbokのように、PhoneGapのを知らないあなたの場合、フラッシュが頻繁にアンドロイド上ではありません知っている依存していますが、おそらく両方を使用することを試みることができますcontext.toDataUrl（）およびfwrite。

Answer 3

あなたはサーバー側の画像に変換してから、携帯電話に画像をダウンロードできるのはなぜですか？