Print or Export Cesium Map Loading Division

It prints with this code but, the code is actually unable to get contents of the div where the map actually loads. I'm using toDataURL() in order to fulfill the need.

My HTML is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script href="script.js" type="text/javascript"></script>

</head>

<body>

    <div id="cesiumContainer">

    </div>

    <button id="printVoucher" onclick="print();">Print</button>

    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>

</body>
</html>

My CSS is as follows:

body
{ 
    background-color: wheat;
}

canvas
{
    border:1px solid red;
    width: 100%;
    height: 100px;
}

#cesiumContainer
{
    width: 100%;
    height: 500px;
}

My JavaScript is as follows:

$(function()
{
    var viewer = document.getElementById("cesiumContainer");
    function print_voucher()
    {   
        var win = window.open();
        win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
        win.print();
        win.location.reload();
    }
    $("#printVoucher").click(function(){ print_voucher(); });
});

See the Output what I get with this above code.

Click here to visit the GitHub Project Link.

Solution

The problem was because by the time you're taking the screenshot, the WebGL drawing buffer has already been swapped out. This happens for performance reasons, you can read more about it here:

https://stackoverflow.com/a/32641456/1278023

The issue has been fixed by changing some lines of codes as follows:

var viewer = new Cesium.Viewer('cesiumContainer', {
                     contextOptions: {
                     webgl: {
                            preserveDrawingBuffer: true
                            }
    }
});

Here is the full set of HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script href="script.js" type="text/javascript"></script>

</head>

<body>

    <div id="cesiumContainer">

    </div>

    <button id="printVoucher" onclick="print();">Print</button>

    <script>
        Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX';
        var viewer = new Cesium.Viewer('cesiumContainer', {
                     contextOptions: {
                     webgl: {
                            preserveDrawingBuffer: true
                            }
    }
});
    </script>

</body>
</html>

Find the updated GitHub project Link