截屏功能算是最基本的场景功能,我们今天就来了解下在cesium场景中如何截屏。
cesium也是基于canvas容器实现webgl,我们只需要获取到cesium的容器canvas,就可以直接保存为图片了
1、获取canvas2image.js源码
guthub地址:https://github.com/hongru/canvas2image
因为我前端框架是基于vue,所以在canvas2image.js最后需要添加export default {Canvas2Image}
/**
* covert canvas to image
* and save the image file
*/
var Canvas2Image = function () {
// check if support sth.
var $support = function () {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
return {
canvas: !!ctx,
imageData: !!ctx.getImageData,
dataURL: !!canvas.toDataURL,
btoa: !!window.btoa
};
}();
var downloadMime = 'image/octet-stream';
function scaleCanvas (canvas, width, height) {
var w = canvas.width,
h = canvas.height;
if (width == undefined) {
width = w;
}
if (height == undefined) {
height = h;