2025年2月19日水曜日

html2canvasを使ってAPEXの画面のスクリーンショットを撮る

JavaScriptライブラリのhtml2canvasを使って、Oracle APEXのアプリケーションのページのスクリーンショットを取得するボタンを作ってみます。

サンプル・データセットのEMP/DEPTをインストールして作成できるアプリケーションを対象にして、作業を実施しました。組み込んだボタンをクリックすると、以下のように動作します。


ボタンCaptureやスクリーンショットを表示するリージョンは、グローバル・ページに作成します。そのため、アプリケーションが異なっても作業は同じです。

以下より、実装について紹介します。

機能を組み込むアプリケーションのアプリケーション定義のユーザー・インターフェースを開きます。すべてのページでhtml2canvasのライブラリとCSS定義を読み込むように、以下の設定を加えます。

JavaScriptのファイルURLに以下を追加します。

https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js

CSSのファイルURLに以下を追加します。ファイルscreenshot.cssは後ほど静的アプリケーション・ファイルとして作成します。

#APP_FILES#css/screenshot#MIN#.css


ページ・デザイナで、ページ番号０のグローバル・ページを開きます。

スクリーンショットを表示するインライン・ダイアログのリージョンを作成します。

識別のタイプは静的コンテンツ、レイアウトのスロットにDialogs, Drawers and Popupsを選択します。

外観のテンプレートにInline Dialogを選択し、リージョンをインライン・ダイアログとして扱えるようにします。テンプレート・オプションのRemove Boddy Paddingに有効にし、SizeにLarge(720x480)を選択しています。

ソースのHTMLコードにスクリーンショットを表示するIMG要素を記述します。html2canvas自体はCANVAS要素にスクリーンショットを描画しますが、CANVASからイメージを取り出しIMG要素として表示します。今回は実装しませんが、スクリーンショットをBLOBとして取り出しているので、データベースへ保存する機能などを容易に追加できます。

<img id="screenshot" class="screenshot-container"></div>

JavaScriptからリージョンを開くため、静的IDとしてMODALDIALOGを設定します。


スクリーンショットを取得するボタンCAPTUREを作成します。どのページでも表示されるように、レイアウトのスロットにAfter Logoを選択します。

動作のアクションとして動的アクションで定義を選択します。


ボタンCAPTUREをクリックしたときに、TRUEアクションとしてJavaScriptコードを実行します。設定のコードは以下になります。
const img = document.getElementById("screenshot");
html2canvas(document.body).then( (canvas) => {
    canvas.toBlob( (blob) => {
        const url = URL.createObjectURL(blob);
        img.src = url;
    })
});
apex.theme.openRegion("MODALDIALOG");

静的アプリケーション・ファイルとしてcss/screenshot.cssを作成します。

ディレクトリはcss、ファイル名はscreenshot.css、内容としては以下を記述します。
.screenshot-container {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

以上で機能の組み込みは完了です。

今回作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/taking-screenshot-using-html2canvas.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: