保存は、ユーザーが現在の画面のスナップショットを取ることができ、それに注釈を付けることができます（/落書き/などを変更）し、その後、電子メールで送信することができます。ここで私は私のアプリで機能を実装したい

Question

それを編集した後、スクリーンショットをキャプチャ私のアプリはAndroid用と同様にios用のphonegapを使用しています。しかし、主にjavascript/jqueryで構成されています。

これまでのところ私は達成することができる午前：

1. キャンバスに現在のHTMLを保存する（html2canvasライブラリの助けを借りて）
2. sketch.js
3. が提供するフリーハンドツールを使用して、そのキャンバスと対話するユーザーを有効にしますキャンバス上の任意の場所にテキストノートを追加する
4. phonegapのemail Composer Plugin

を使用して新しいメールポップアップを開く

対話がユーザに感じ提供するために、私は、キャンバスの層を実装：

1：第一層はhtml2canvas介して取り込ま実際のスナップショットを示すであろう。このキャンバス（capturedCanvas）に私のスナップショットを表示するには、私は図書館を経て得られた画像にキャンバスの背景画像を設定しています。コードは以下の通りである：

$('.myClass').html2canvas({ 

       onrendered: function(canvas) { 

        var capturedCanvas = document.getElementById('capturedImageView'); 
        capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

       } 
     }); 

2及び3：その上の層は、ユーザがフリーハンドツールまたはテキストツールを選択したかどうかに応じて切り替えます。

すべてが正常に動作しますが、ユーザーが別々のキャンバスとの対話終了したとき、私はそれが電子メールに添付することができるように一枚の画像に3つのキャンバスを持参する必要があります。 は、私は私の最終的な画像を伴わないhtml2canvasからもらっ層2,3 context.drawImageを使って何とか私の実際のスナップショットを接続することができています。

この問題についての洞察を提供してください：

私の最後のスナップショットは、このようになります。スナップショットが表示されないhtml2canvas

Answer 1

理由はこれにある：あなたはこのような背景を設定すると

capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

あなただけの通常の要素ではなく、キャンバス自体の内容としてキャンバスに影響します。これは、その上のピクセルの一部として登録されません。

finalCanvasContext.drawImage(htmlCanvas, 0, 0); 
finalCanvasContext.drawImage(layer1canvas, 0, 0); 
finalCanvasContext.drawImage(layer2canvas, 0, 0); 

か：：

$('.myClass').html2canvas({ 

    onrendered: function(canvas) { 

     var capturedCanvas = document.getElementById('capturedImageView'); 
     var ctx = capturedCanvas.getContext('2d'); 
     ctx.drawImage(canvas, 0, 0); 

     //.. continue to allow draw etc. 
    } 
}); 

（私はあなたを知らないあなたがする必要がどのような

がhtml2canvasからだけでなく、最終的なキャンバス（例えば）にdrawImage()結果にあります他のコードは表示されていないので、必要に応じて調整してください）。