How to get a viewer screenshot with BIM360 Pushpins and markups from MarkupsCore Extension?

Question

I want to get a viewer screenshot with pushpins made with Autodesk.BIM360.Extension.PushPin and markups made with Autodesk.Viewing.MarkupsCore.

This related question describes how it's done with canvas and draw image, and other question do the same and even has a CodePen, but the markups are displaced:

Real:

Image:

So I'm searching through other methods.

getScreenshot method documentation:

Is this overlayRenderer that I'm looking for? If it is, how do I configure it to get the pushpins and markups?

EDIT: I have already seen the html2canvas library, and the markups are also in the wrong position.

Answer 1

Solved with html2canvas, the previous attempts with this lib failed because:

First try: Screenshot the whole viewer div, that's supposed to get pushpins and markups, but markups went misplaced.

Second try: Screenshot the whole viewer div, but exclude markups passing an identifier to html2canvas config, then create another image with markupsExt.generateData(), and draw these two images into a temporary created canvas. This attempt is a little tricky because it's the same as solution, the difference is that I triggered all my next events inside svgimage.onload function, and with this approach, don't know why, markups were not even drawn.

So the solution is wrap the whole logic into a function returning a promise, and resolve the generated image.

Code:

                const takeImg = () => {
                    return new Promise((resolve, reject) => {
                        html2canvas(
                            document.getElementById("mainViewerDiv"),
                            {
                                ignoreElements: (element) =>
                                    element.getAttribute(
                                        "layer-order-id"
                                    ) === "markups-svg",
                            }
                        ).then((canvas) => {
                            canvas.toBlob(
                                async function (blob) {
                                    const viewerImg = new Image();
                                    const viewerImgUrl =
                                        URL.createObjectURL(blob);
                                    viewerImg.src = viewerImgUrl;
                                    viewerImg.onload = function () {
                                        const newCanvas =
                                            document.createElement(
                                                "canvas"
                                            );
                                        newCanvas.width = viewerImg.width;
                                        newCanvas.height = viewerImg.height;
                                        const svgImg = new Image();

                                        const svgString =
                                            this.mk_ext.generateData();

                                        const svgBlob = new Blob(
                                            [svgString],
                                            {type: "image/svg+xml",});
                                        const svgUrl =
                                            URL.createObjectURL(svgBlob);
                                        svgImg.src = svgUrl;
                                        svgImg.onload = async function () {
                                            const ctx =
                                                newCanvas.getContext("2d");
                                            ctx.drawImage(viewerImg, 0, 0);
                                            ctx.drawImage(svgImg, 0, 0);

                                            resolve(
                                                newCanvas.toDataURL(
                                                    "image/png"
                                                )
                                            );
                                        };
                                    }.bind(this);
                                }.bind(this)
                            );
                        });
                    });
                };

Answer 2

The easiest solution is if you use the same dimensions for the image that the Viewer is using.
Updated code for https://codepen.io/petrbroz/pen/gOMPYRV

forgist.setup(document.getElementById('viewer'), 2).then(viewer => {
  viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
  viewer.loadExtension('Autodesk.Viewing.MarkupsGui');
  document.getElementById('get-screenshot').addEventListener('click', 
    async function () {
      //const dataUrl = await getScreenshotDataUrl(viewer, viewer.container.clientWidth, 1920, 1080);
      const dataUrl = await getScreenshotDataUrl(viewer, viewer.container.clientWidth, viewer.container.clientHeight);
      let tab = window.open();
      //tab.document.body.innerHTML = `<img src="${dataUrl}" width="1920" height="1080">`;
      tab.document.body.innerHTML = `<img src="${dataUrl}" width="${viewer.container.clientWidth}" height="${viewer.container.clientHeight}">`;
  });
});

Then you can crop the image to some other size if needed, like it's done e.g. here: https://aps.autodesk.com/blog/more-screenshots