forge-viewer-screenshot.js

function screenshot_with_property_panel() {

    //get viewer object
    var _viewer = viewerApp.getCurrentViewer();

    //get screenshot blob of the viewer container
    var ViewerBlobURL = _viewer.getScreenShot();

    //get element of property panel
    var propertyPanel = document.getElementById('ViewerPropertyPanel');

    if( !propertyPanel ){
        alert('property panel is null!');
        return;
    }

    //check if property panel is displayed
    var isPropertyPanelVisible = propertyPanel.style.visibility;
    var isPropertyPanelNone = propertyPanel.style.display;
    if(isPropertyPanelVisible == 'hidden'  ||
        isPropertyPanelNone== 'none' )  {
        alert('property panel is hidden!');
        return;
    }

    //get the image of viewer
    var view3DContainter = document.getElementById('viewer3D-viewing-container');
    var w = view3DContainter.offsetWidth;
    var h= view3DContainter.offsetHeight;

    var img = new Image();
    img.src = ViewerBlobURL;

    // create temp canvas
    var tmpCanvas = document.createElement("canvas");
    var ctx = tmpCanvas.getContext("2d");
    tmpCanvas.width = w;
    tmpCanvas.height = h;


    img.onload = function() {

        // draw viewer image on canvas
        ctx.drawImage(img, 0, 0, w, h);
        //get the position of property panel
        var proTop = propertyPanel.offsetTop;
        var proLeft = propertyPanel.offsetLeft;
        var proW = propertyPanel.offsetWidth;
        var proH = propertyPanel.offsetHeight;

        //generate propety panel to a canvas
        html2canvas(propertyPanel, {
            onrendered: function(canvas) {
                //draw image of property panel to canvas
                ctx.drawImage(canvas,proLeft,proTop,proW,proH);
                //produce image blob
                var newBlobURL = window.URL.createObjectURL(dataURLToBlob(tmpCanvas.toDataURL("image/png")));
                //open the blob in a new page (optional)
                window.open(newBlobURL);
            }
        });
    };
}

// https://github.com/ebidel/filer.js/blob/master/src/filer.js
//auxiliary function. copied from Viewer3D.js
function dataURLToBlob(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);

        return new Blob([raw], {type: contentType});
    }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
}