Reputation: 93
My intention is to save a screenshot along with the markups. I followed both this tutorial and this answer, but it did not work for me. Screenshot always ended up without the markups. Following is my code
function generateSnaphot(ncrNo_, luName_, keyRef_, markupsStringData) {
console.log('* * * * * generateSnaphot ');
var screenshot = new Image();
screenshot.onload = function () {
viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then(function (markupCore) {
// load the markups
markupCore.show();
markupCore.enterViewMode();
markupCore.loadMarkups(markupsStringData, "layerName");
// ideally should also restore the 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, function() {
// hide the markups
//markupCore.hide();
var canvas = document.getElementById('snapshot');
const a = document.createElement('a');
//a.style = 'display: none';
document.body.appendChild(a);
a.href = canvas.toDataURL();
a.download = 'markup.png';
a.click();
document.body.removeChild(a);
}, true);
// hide the markups
//markupCore.hide();
});
};
// Get the full image
viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
console.log('%%%%%%%%%%%%%%% blobURL : ', blobURL);
CreateAndConnectMedia(ncrNo_, luName_, keyRef_, blobURL);
});
}
I get the proper markup from the generateData() method and also proper screenshot from the blob. But the markups are missing in the final screenshot.
Is something wrong in my code ? or am i not doing the process properly ?
Upvotes: 0
Views: 387
Reputation: 1
For me, the answer of "Petr Broz" shows only the last markups. To show all markups, you need to change the third parameter of renderToCanvas function from false to true.
Upvotes: 0
Reputation: 9942
Here's a modified version of your snippet, assuming that you already have some markups created (either manually, or loaded via markupCore.loadMarkups(markupsStringData, "someLayer")
:
function generateSnapshot(viewer) {
let screenshot = new Image();
screenshot.onload = async function () {
const markupCore = await viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
markupCore.show();
let canvas = document.createElement('canvas');
canvas.width = viewer.container.clientWidth;
canvas.height = viewer.container.clientHeight;
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);
markupCore.renderToCanvas(ctx, function () {
const a = document.createElement('a');
document.body.appendChild(a);
a.href = canvas.toDataURL();
a.download = 'markup.png';
a.click();
document.body.removeChild(a);
}, false);
};
viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
screenshot.src = blobURL;
});
}
If I run my Forge app, add a couple of markups (in my case using the Autodesk.Viewing.MarkupsGui
extension), and then call this generateSnapshot
function, I get the screenshot with markups as expected.
Upvotes: 4