Autodesk Viewer API，不为新版本的屏幕截图渲染标记

问题描述 投票：0回答：1

代码运行到Viewer的版本2.15。*但不在更高版本上运行。标记不会显示图像。

/**
     * 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;
        });
    }
markup autodesk-viewer
1个回答
0
投票

编写了一个在Viewer 3.3上正常运行的测试示例代码。

注意我正在使用包含SVG中标记定义的字符串var markupSVG，代码恢复此标记，捕获屏幕截图并恢复查看器（通过隐藏标记）。左边是Viewer，右边是画布。

eft with Forge Viewer, right with canvas snapshot

<!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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.