Autodesk Forge 获取带有标记的屏幕截图
Autodesk Forge get screenshot with markups
我有一个用于 Autodesk Forge 查看器的标记扩展。我想获得带有标记的屏幕截图,但只得到没有标记的屏幕截图。
我尝试使用此代码获取屏幕截图:
let getScreenShoot = document.getElementById('getScreenShoot')
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';
});
})
为什么我的代码不起作用,查看器 7 是否不支持它?
请使用以下方式调用renderToCanvas
,因为重新渲染作业在内部是异步过程,图像加载也是异步的。
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);
完整代码:
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;
});
通过在 markupCore.renderToCanvas 中设置“false”对我有用。 @shohag sarkar
markupCore.renderToCanvas(ctx, function() {
document.body.removeChild(a);
}, false);
// hide the markups
markupCore.hide();
});
};
我有一个用于 Autodesk Forge 查看器的标记扩展。我想获得带有标记的屏幕截图,但只得到没有标记的屏幕截图。 我尝试使用此代码获取屏幕截图:
let getScreenShoot = document.getElementById('getScreenShoot')
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';
});
})
为什么我的代码不起作用,查看器 7 是否不支持它?
请使用以下方式调用renderToCanvas
,因为重新渲染作业在内部是异步过程,图像加载也是异步的。
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);
完整代码:
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;
});
通过在 markupCore.renderToCanvas 中设置“false”对我有用。 @shohag sarkar
markupCore.renderToCanvas(ctx, function() {
document.body.removeChild(a);
}, false);
// hide the markups
markupCore.hide();
});
};