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;});
Viewer なので、標準の「一人称視点」ツールで周囲を見回したり、歩き回ってしたりして、ビューを調整してからキャプチャすることも可能です。
この他にも、個々のオブジェクトの非表示状態（「ゴースト非表示オブジェクト」）に加えて、「断面解析」ツールや「分解モデル」ツールの操作内容もキャプチャされるので、特定の視点を記録する機能として便利です。ただし、「計測」ツールでツールチップ上に表示される計測値はキャプチャ出来ません。
By Toshiaki Iezaki
You must be logged in to post a comment.