choromeでスクリーンショットが撮れません

コメント

2件のコメント

  • Avatar
    津田 良太郎

    こんにちは

    consoleにcanvasDataを出力してアドレスバーに直接入力すると正しく表示されたので、PlayCanvas側でのキャプチャ設定は問題なく動いているみたいですね...

    サンプルのようにwindow.open()でdataURL()を直接呼ぶとabout:blankから遷移してくれないためキャプチャがうまくいっていないように見えます。

    ごり押しな解決法ですが、ui.htmlに<img>を置いて、takeScreenshot()の末尾でimg のsrcにcanvasDataを流すと正しくキャプチャできていることが確認できました。

    ui.html

    <div class="container">
    <button id="screenShotBtn">Take Screenshot</button>
    <img id="capture"></img>
    </div>

    screenshot.js

    // NOTE: THIS SCRIPT ONLY WORKS IF 'PRESERVE DRAWING BUFFER' IS ENABLED IN PROJECT SETTINGS

    var Screenshot = pc.createScript('screenshot');

    Screenshot.prototype.initialize = function() {
    this.app.on('ui:takeScreenshot', function () {
    this.takeScreenshot();
    }, this);

    };

    Screenshot.prototype.takeScreenshot = function () {
    // Get application canvas element
    var canvas = document.getElementById ('application-canvas');

    // Get image data from canvas
    var imageData = canvas.toDataURL ();

    // Show the image data in a new window/tab.
    document.getElementById("capture").src = imageData;
    };

     

    現状ChromeとEdgeのみ現象が発生するとのことなので、おそらくブラウザ側でwindow.open()からdata:image/png;base64を直接レンダリングしないような仕様ができた等が考えられます。

    解決策としては一枚htmlを用意し<img>要素に流し込むか、ajax等でサーバーに送信してpng保存する等ご対応ください

  • Avatar
    tanaka

    津田様

     

    迅速かつ丁寧に解説いただき誠にありがとうございます。

    提示いただいた解決策で修正してみようと思います。

    お忙しいところご対応いただきありがとうございました。

ログインしてコメントを残してください。