APS Viewer：スクリーンキャプチャ

APS Viewer でカンバス上に表示中の状態をキャプチャ画像として取得したい場面があります。

キーボードショートカット（Windows の場合、例えば [Alt]+[Print Screen] キーなど）やキャプチャーツールでアプリの表示画面をキャプチャすることが出来ますが、ウィンドウタイトルやフレームも映り込んでしまいます。Viewer 内のツールバーやパネルも同様です。

ツールバーやパネルなどのユーザインタフェースを排除して、純粋にカンバスの表示内容だけをキャプチャしたい場合には、getScreenShot メソッドを利用することが出来ます。

_viewer.getScreenShot(_viewer.container.clientWidth, _viewer.container.clientHeight,);

上記のように使用すると、ブラウザ上に新しいタブが開かれて、キャプチャした画像が表示されます。なお、上記コード中の _viewer は Viewer インスタンスを格納する変数です。NOP_VIEWER に置き換えて考えることも可能です。

キャプチャ画像をファイルとして入手したい場合には、第３パラメータにコールバックを設定して Blob URL からダウンロードすることも出来ます。

_viewer.getScreenShot(_viewer.container.clientWidth, _viewer.container.clientHeight, function (blobURL) {

const a = document.createElement('a');

document.body.appendChild(a);

a.href = blobURL;

console.log(a.href);

a.download = 'captured screen.png';

a.click();

document.body.removeChild(a);

});

使用する「環境」にもよりますが、先のバスルームのように、「周囲光の影」（Ambient Occlusion）が投げかける影によって表現したいモデルがくすんで見えたり、強調したい微細な箇所が明瞭にならない場合も出てきます。次の例は、[グリッドライト] 環境選択時に「周囲光の影」をオンにした状態の Viewer 画面です。

「周囲光の影」設定は、setQualityLevel メソッドの第１パラメータで指定することが出来ます。このパラメータ値を false で「周囲光の影」をオフにしてから、キャプチャすると、オン時よりも明瞭な形状確認が出来る場合があります。

_viewer.setQualityLevel(false, true);

Forge Viewer：簡単なシーンカスタマイズでもご紹介したように、Viewer 内の「環境」はプログラムからもコントロールすることが出来るので、環境変更後にキャプチャすることも可能です。次の例は、先のパスルームについて、[寒色ライト] 環境に、また、「周囲光の影」をオフに、それぞれ設定を変更してからキャプチャした画像です。

なお、Autodesk.Viewing.MarkupsCore エクステンションを利用したマークアップは、getScreenShot メソッドのみではキャプチャされませんのでご注意ください。

カンバス上の内容と同時にマークアップもキャプチャしたい場面では、MarkupsCore エクステンションの renderToCanvas メソッドを併用する必要があります。

let screenshot = new Image();

screenshot.onload = async function () {

let canvas = document.createElement('canvas');

canvas.width = _viewer.container.clientWidth;

canvas.height = _viewer.container.clientHeight;

let ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);

_markup = _viewer.getExtension('Autodesk.Viewing.MarkupsCore');

_markup.show();

_markup.loadMarkups(_markupsPersist, "layer1");

_markup.renderToCanvas(ctx, function () {

const a = document.createElement('a');

document.body.appendChild(a);

a.href = canvas.toDataURL();

console.log(a.href);

a.download = 'captured screen.png';

a.click();

document.body.removeChild(a);

_markup.hide();

}, true);

};

_viewer.getScreenShot(_viewer.container.clientWidth, _viewer.container.clientHeight, function (blobURL) {

screenshot.src = blobURL;

});