mpetroff
commented
2 years ago You probably can get something working to capture the hot spots and tool tips with html2canvas. However, it wouldn't capture the panorama, so you would need to combine both methods. Furthermore, if you want to capture the tool tips, you'd have to add CSS rules so display the tool tips without needing a mouse over.
Below is a rough example. Five seconds after the page is open, it draws the viewer, including the panorama, hot spots, and UI, to a <canvas> element and appends it to the page. It seems that html2canvas has issues drawing the UI, though.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="src/css/pannellum.css"/>
<script type="text/javascript" src="src/js/pannellum.js"></script>
<script type="text/javascript" src="src/js/libpannellum.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
#panorama {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
viewer = pannellum.viewer('panorama', {
"panorama": "examplepano.jpg",
"hotSpots": [
{
"pitch": -10,
"yaw": -20,
"type": "info",
"text": "Test",
},
]
});
setTimeout(function() {
viewer.getRenderer().render(
viewer.getPitch() * Math.PI / 180,
viewer.getYaw() * Math.PI / 180,
viewer.getHfov() * Math.PI / 180,
{returnImage: 'ImageBitmap'}
).then(img => {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
html2canvas(document.querySelector(".pnlm-ui"), {canvas: canvas, backgroundColor: 'rgba(0, 0, 0, 0)'}).then(canvas => {
document.body.appendChild(canvas);
});
});
}, 5000);
</script>
</body>
</html>
Hi, great library, thanks! I'm rendering the screen scene as you've demonstrated here and would like to include the hotspots, and possibly their tooltips. Is this something that's possible or are they coming from 'different spaces' with the hotspots being div elements and the image itself being from the canvas?
Suggestions on approaches would be appreciated.
Thanks!