cesium实现截屏保存图片路程
1.首先需要引入插件canvas2image.js用来将canvas转图片cesium也是基于canvas容器实现webgl,canvas可以直接将内容保存成图片:canvas2image。我们只需要获取到cesium的容器canvas就可以直接保存为图片了: var canvas = viewer.scene.canvas; var genimg = Canvas2Image.co...
·
1.首先需要引入插件canvas2image.js用来将canvas转图片
cesium也是基于canvas容器实现webgl,canvas可以直接将内容保存成图片:canvas2image。我们只需要获取到cesium的容器canvas就可以直接保存为图片了:
var canvas = viewer.scene.canvas;
var genimg = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height , 'png');
var image = document.getElementById('image');
image.src = genimg.src;
2.运行控制台报错:Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
分析:因为infoBox是Ifram框架,H5的新安全机制不允许在其中执行脚本,如果在里面写了类似于点击事件的脚本,则会提示如下错误:
解决方法有两个:
1.禁用infobox,自己设计信息面板。
2.设置沙箱的权限
var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
3.结果运行无法得到场景截图,是空白:
场景截图需要开启:preserveDrawingBuffer。
viewer初始化设置:
contextOptions: {
//cesium状态下允许canvas转图片convertToImage
webgl: {
alpha: true,
depth: false,
stencil: true,
antialias: true,
premultipliedAlpha: true,
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: true
},
allowTextureFilterAnisotropic: true
},
之后便可以将截屏保存到标签img中
4.想要将截屏下载到本地
/**
* 在本地进行文件保存
* @param {String} data 要保存到本地的图片数据(img的src)
* @param {String} filename 文件名
*/
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
5.若需要将除cesium以外的dom加入到截屏中,需要借助html2canvas插件来实现,引入html2canvas
将第1步替换:
var test = $("body").get(0); //将jQuery对象转换为dom对象
// 点击转成canvas
$('#btn').click(function(e) {
// 调用html2canvas插件
html2canvas(test).then(function(canvas) {
// canvas宽度
var canvasWidth = canvas.width;
// canvas高度
var canvasHeight = canvas.height;
// 调用Canvas2Image插件转图片
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
var image = document.getElementById('image');
//保存到img标签中
image.src = img.src;
// 调用保存到本地的方法下载图片
saveFile(image.src, "aa.png")
});
});
更多推荐
已为社区贡献2条内容
所有评论(0)