ビジネスの背景
モバイル・プロジェクトでは、スクリーンショットやイメージのステッチングが要求されることがよくありますが、 を使用すると、ユーザーのブラウザで直接、ページの全体または一部のスクリーンショットを撮ることができます。html2canvas スクリプトは、DOM を読み取り、要素にさまざまなスタイルを適用することで、ページをイメージとしてレンダリングします。サーバーからのレンダリングを必要とせず、イメージ全体がクライアントのブラウザで作成されます。ブラウザがキャンバスをサポートしていない場合は、代わりに Flashcanvas または ExplorerCanvas テクノロジーを使用して実装されます。このスクリプトは以下のブラウザでサポートされています：Firefox 3.5+、Google Chrome、Operaの新しいバージョン、IE9+。
シナリオ
次の図はプロジェクトでの使用シナリオを示しています。バックエンドはポスターへのリンクを提供し、ポップアップボックスはポスターのイメージとQRコードをつなぎ合わせたものを生成し、このイメージを保存または共有します。
使用方法
ステップ1
キャンバスに描画html2canvas要素を介してページを保存し、キャンバスのbase64データにし、sdkを呼び出してイメージを保存するメソッドを提供するために、システムを判断する必要性を保存し、それがiosのシステムである場合、適切に保存するために、イメージの種類フィールドのbase64Urlを削除する必要があります。
ステップ2
レンダリング範囲とノード名を指定してプラグインのレンダリング操作を実行し、要件に応じて内部ノードレイアウトを変更できます。
ステップ3
レンダリングに成功したら、shaped img イメージをロードし、canvas ノードを非表示にします。
