I have a markup extension for autodesk forge viewer. I want to get screenshot with markups, but only got screenshot without markups. I try to get screenshot with this code
getScreenShoot.addEventListener('click', () => {
let screenshot = new Image();
markup.leaveEditMode();
markupsData = JSON.parse(localStorage.getItem('markupsData'));
markupsData.map((mark, index) => {
markup.loadMarkups(mark, `markups-svg + ${index}`);
});
let canvas = document.getElementById('snapshot');
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);
markup.renderToCanvas(ctx);
viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
screenshot.src = blobURL;
var saveImg = document.createElement('a');
screenshot.appendChild(saveImg);
saveImg.style.display = 'none';
saveImg.href = blobURL;
saveImg.download = "screenshot.jpg";
document.body.appendChild(saveImg);
saveImg.click();
markup.hide();
markup.leaveEditMode();
markupTools.style.display = 'none';
});
})````
Please help me to find a trouble in this code, maybe it's not supported in viewer 7.*
Please use the following way to call renderToCanvas
, since the rerender job is async process internally and the image loading is async, too.
markup.renderToCanvas(ctx, function() {
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);
The full code:
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 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) {
screenshot.src = blobURL;
});
Ok, thank you, its a solution, but i have a new problem. This code download only markups without model. Why? Is it right??
Please consider providing your minimum reproducible code sample. This code shows both things, the model and markup, in the downloaded image at my end
OK thank you i will check my code