This is actually something I’ve been running into a lot since I’ve been working on taking screenshots and videos for a lot of recent blog posts. I added a shortcut to capture the canvas output and download it as an image when pressing P in the Cesium viewer on Glitch:
https://glitch.com/edit/#!/cesium-viewer?path=views/index.html:1:0
The code for doing this is at the bottom of index.html:
// Capture screenshot directly from canvas
function captureScreenshot(){
var deferred = Cesium.when.defer();
var removeCallback = viewer.scene.postRender.addEventListener(function() {
removeCallback();
try {
const cesiumCanvas = viewer.scene.canvas;
deferred.resolve(cesiumCanvas.toDataURL(‘image/png’));
} catch (e) {
deferred.reject(e);
}
}, this);
viewer.scene.render(viewer.clock.currentTime);
return deferred.promise;
}
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
var byteString = atob(dataURI.split(’,’)[1]);
// separate out the mime component
var mimeString = dataURI.split(’,’)[0].split(’:’)[1].split(’;’)[0];
// write the bytes of the string to an ArrayBuffer
var arrayBuffer = new ArrayBuffer(byteString.length);
var _ia = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteString.length; i++) {
_ia[i] = byteString.charCodeAt(i);
}
var dataView = new DataView(arrayBuffer);
var blob = new Blob([dataView], { type: mimeString });
return blob;
}
function downloadURI(uri, name) {
var blob = dataURItoBlob(uri);
var urlToDownload = window.URL.createObjectURL(blob);
var link = document.createElement(“a”);
link.download = name;
link.href = urlToDownload;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(urlToDownload);
delete link;
}
document.addEventListener(“keydown”, function(event){
if (event.keyCode == 80) {
captureScreenshot().then(function(dataUri){
downloadURI(dataUri, “Cesium Screenshot”);
})
.otherwise(function(error){
console.log(error);
})
}
}, false);
``
You could conceivably automate this to spit out frames like that to get a really high quality rendering. It would be awesome to one day have a little app on top of Cesium that can capture all mouse and keyboard input, and replay it while capturing the frames this way.