ユーザーが現在の画面のスナップショットを取り、それに注釈を付けて（変更/落書き/など）、その後メールで送信できる機能をアプリに実装したいと考えています。私のアプリは、ios と android のサポートに phonegap を使用しています。しかし、主にjavascript/jqueryで構成されています。
これまでのところ、私は達成することができます:
- 現在の html をキャンバスに保存する ( html2canvasライブラリの助けを借りて)
- sketch.jsが提供するフリーハンド ツールを使用して、ユーザーがそのキャンバスを操作できるようにします。
- キャンバス上の任意の場所にテキスト メモを追加します。
- 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 つのキャンバスを 1 つの画像にして、メールに添付できるようにする必要があります。を使用してレイヤー 2 と 3 を接続できますcontext.drawImageが、何らかの形で html2canvas から取得した実際のスナップショットが最終イメージに付随していません。
私の最終的なスナップショットは次のようになります。
この問題に関する洞察を提供してください。