Autodesk Viewer API, not rendering markup to screenshot canvas for new version

Question

Codes runs upto version 2.15.* of the Viewer but doesn't run on higher version. The markup doesn't shows up with the image.

/**
     * Get's the markup data as a base 64 image.
     *
     * @param viewer
     * @returns {Promise}
     */


    service.getDataFromMarkup = function (viewer) {
        if (!viewer) {
            throw new Error('Viewer instance not provided');
        }

        let base64Img = viewer.getScreenShotBuffer();

        return loadImageWithData(base64Img).then(img => {
            let canvas = document.createElement('canvas');
            let context = canvas.getContext('2d');
            let markupCore = viewer.loadedExtensions['Autodesk.Viewing.MarkupsCore'];
            let viewerBounds = viewer.container.getBoundingClientRect();

            markupCore.generateData();
            canvas.width = viewerBounds.width;
            canvas.height = viewerBounds.height;
            context.drawImage(img, 0, 0, viewerBounds.width, viewerBounds.height);


            markupCore.renderToCanvas(context);
            return canvas.toDataURL();
        });
    };



    /**
     * Returns an <img> DOM element with the provided image as a source.
     *
     * @param src
     * @returns {*}
     */
    function loadImageWithData(src) {
        return $q((resolve) => {
            let img = new Image();

            // Resolve with img element when the
            // source image has been completely loaded.
            img.onload = function () {
                resolve(img);
            };
            img.src = src;
        });
    }

the Markup extension changed on 2.16, see this https://forge.autodesk.com/blog/using-autodeskviewingmarkupscore-extension — Augusto Goncalves, Dec 12 '17 at 13:47
i checked the blog, problem is markup rendering into the canvas. i get the svg-xml of markup from generateData() function, also the base64 of image, i've created 2d canvas and drawn the image onto canvas context, then used rendertoCanvas(context). Now, shouldn't the canvas now be with image and markup? — Bi SAl MhRzn, Dec 13 '17 at 02:58

score 0 · Answer 1 · answered Dec 19 '17 at 12:02

Prepared a testing sample code that works fine on Viewer 3.3.

Note I'm using a string var markupSVG that contains the definition of the markup in SVG, the code restores this markup, capture the screenshot and restores the Viewer (by hiding the markups). Left with Viewer, right with canvas.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Snapshot with Markup</title>
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v3.3" type="text/css">
</head>

<body>

    <body onload="initializeViewer();" style="margin:0px; overflow:hidden">
        <div style="width:49vw; height:100vh; position:relative; display:inline-block;">
            <div id="viewer3d" style="margin:0;">
            </div>
        </div>
        <div style="width:49vw; height:100vh;display:inline-block;">
            <canvas id="snapshot" style="position:absolute;"></canvas>
            <button onclick="snaphot();" style="position:absolute;">Snapshot!</button>
        </div>
    </body>

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js"></script>
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.js?v=v3.3"></script>

    <!-- Developer JS -->
    <script>
        var viewer;

        function initializeViewer() {
            // initialize the viewer in "offline" mode (no security from Forge)
            var myViewerDiv = document.getElementById('viewer3d');
            viewer = new Autodesk.Viewing.Private.GuiViewer3D(myViewerDiv);
            var options = {
                'env': 'Local',
                'document': 'http://autodesk-forge.github.io/viewer-javascript-offline.sample/shaver/0.svf'
            };
            Autodesk.Viewing.Initializer(options, function () {
                viewer.start(options.document, options);
                viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
                    viewer.utilities.fitToView();
                });
            });
        }

        function snaphot() {
            var screenshot = new Image();
            screenshot.onload = function () {
                viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then(function (markupCore) {

                    // load the markups
                    markupCore.show();
                    markupCore.loadMarkups(markupSVG, "layerName");

                    // ideally should also restore state of Viewer for this markup

                    // prepare to render the markups
                    var canvas = document.getElementById('snapshot');
                    canvas.width = viewer.container.clientWidth;
                    canvas.height = viewer.container.clientHeight;
                    var ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);

                    markupCore.renderToCanvas(ctx);

                    // hide the markups
                    markupCore.hide();
                });
            };

            // Get the full image
            viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
                screenshot.src = blobURL;
            });
        }

        var markupSVG = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" style="position:absolute; left:0; top:0; transform:scale(1,-1); -ms-transform:scale(1,-1); -webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); -o-transform:scale(1,-1); transformOrigin:0, 0; -ms-transformOrigin:0, 0; -webkit-transformOrigin:0, 0; -moz-transformOrigin:0, 0; -o-transformOrigin:0, 0; " width="510" height="960" viewBox="-531.25 -1000 1062.5 2000" cursor="crosshair" pointer-events="painted"><metadata><markup_document xmlns="http://www.w3.org/1999/xhtml" data-model-version="4"></markup_document></metadata><g cursor="inherit" pointer-events="stroke"><metadata><markup_element xmlns="http://www.w3.org/1999/xhtml" stroke-width="10.416666666666629" stroke-linejoin="miter" stroke-color="#ff0000" stroke-opacity="1" fill-color="#ff0000" fill-opacity="0" type="cloud" position="-48.958333333333336 307.2916666666667" size="418.75 377.08333333333337" rotation="0"></markup_element></metadata><path id="markup" d="M -183.75000000000003 -142.59259259259264 a 20.416666666666668 20.37037037037037 0 1 1 20.416666666666668 -20.37037037037037 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 a 20.416666666666668 20.37037037037037 0 1 1 20.416666666666668 20.37037037037037 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 a 20.416666666666668 20.37037037037037 0 1 1 -20.416666666666668 20.37037037037037 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 a 20.416666666666668 20.37037037037037 0 1 1 -20.416666666666668 -20.37037037037037 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 z" stroke-width="10.416666666666629" stroke="rgba(255,0,0,1)" fill="none" transform="translate( -48.958333333333336 , 307.2916666666667 ) rotate( 0 )"/></g></svg>';
    </script>
</body>

</html>

still i dont see the markup from the blobURL, im using chrome 63. — Bi SAl MhRzn, Jan 03 '18 at 01:28
it may be a timing issue, have you tried saving the image manually a few moments after it completely renders on the screen? — Augusto Goncalves, Jan 04 '18 at 12:20
I am facing the same problem. I can see the model but not the markup! But if I copy the svg string and paste it to a html document then the markup shows up. — Md. Shohag Mia, Jun 19 '20 at 02:24

Autodesk Viewer API, not rendering markup to screenshot canvas for new version

1 Answers1