专栏首页acoolgiser_zhuanlanjs截屏以及three.js场景截屏

js截屏以及three.js场景截屏

做这个功能都是半个月之前的事情了,没想到一直耽误却一直都没有写下总结,尴尬。。。。。来来来,说正事

在手机端截屏完全不需要前端动什么脑子,但是在网页上截屏就很头疼了,我这里介绍两种情形,针对普遍和某一特殊功能需求

1、js截屏插件html2canvas.js

这个插件真的很好用,而且GitHub上的小星星也特别多,html2canvas官网 也给了详细的例子,最简单的就这样引用一个库文件,调用就可以将页面中的元素截图下来了。

但是这个插件原理是,将需要截图页面里面的元素一层一层遍历,然后在canvas中进行重绘,再将canvas转换成图片的过程。

注意事项:

  • 不支持iframe
  • 不支持跨域图片(可以先将线上图片转换成base64,然后用base64作为图片路径)
  • 不支持flash
  • 不支持transform、transition过渡、animation动画(备注:transform初始布局是可以的,但是不能参与动画类的操作)

html:

<div id="capture" style="padding: 10px; background: #f5da55">

<h4 style="color: #000; ">Hello world!</h4>

</div>

js:

html2canvas(document.querySelector("#capture")).then(canvas => {

document.body.appendChild(canvas)

});

2、js原生代码截屏

如果你只是要截取canvas里面的内容,那就很简单了。因为canvas原生的有toDataURL方法,可直接将选中的canvas转变为base64编码。因为我是用在three.js这个3d项目的场景里面,所以没用过这个库的朋友可能没遇到过bug。那就是截屏出来的图片是空白的,场景scene后期渲染的比如灯光,加载的模型都没有截图截下来。有两种方法

第一种是在渲染器开启preserveDrawingBuffer :true,即缓冲区保护-是否保存在缓冲区手动清除或覆盖,这个默认是false。开启之后,缓冲区的图像就不会被更新清除,就可以截取下来想要的图案。但问题也很明显,那就是在有动画或者后期渲染内容增加的时候,你的画面会变得很乱,内容被不断的叠加,因此我是建议大家使用第二种方法,这个方法说出来,只是为了让大家更加了解一下。

renderer = new WebGLRenderer({

antialias: true,

alpha: true,

preserveDrawingBuffer :true

})

第二种方法就是在截图之前先渲染一下场景和相机,就不会实时刷新屏幕,导致我们截屏下来的是空白了

let canvas=rederer.domElement

rederer.render(scene, camera)

var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url

window.kk= imgUri // 下载图片

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端技术观察第 31 期

    ConardLi
  • 使用Three.js制作酷炫无比的无穷隧道特效

    一些有WebGL体验的页面,浏览者有种在一个带有材质的隧道中穿梭的感受。这有赖于Three.js以及由fornasetti.com带来的灵感。

    疯狂的技术宅
  • 在微信小游戏中使用three.js显示3D图形

    笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏...

    bering
  • Three.js camera初探——转场动画实现

    three.js是用javascript写的基于webGL的第三方3D库,通过它可以在网页中进行3D建模,结合上TweenMax.js动画库,在网页中实现3D动...

    郭诗雅
  • 一步一步搭建前端监控系统:如何将网页截图上报?

    PS:本文关于Fundebug录屏功能的内容有些不准确的地方,比如录屏并非通过截图实现的,录屏插件的BUG也已经修复了,录屏并非只支持Chrome,录屏数据并不...

    Fundebug
  • HTML5 游戏引擎深度测评

    最近看到网上一篇文章,标题叫做《 2016年 最火的 15 款 HTML5 游戏引擎 》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料...

    李海彬
  • HTML5游戏引擎深度测评

    最近看到网上一篇文章,标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料。特...

    李海彬
  • 【玩转腾讯云】轻便快捷的小程序

    ...

    9528
  • WebVR如此近 - three.js的WebVR示例程序解析

    关于WebVR 最近VR的发展十分吸引人们的眼球,很多同学应该也心痒痒的想体验VR设备,然而现在的专业硬件价格还比较高,入手一个估计就要吃土了。但是,对于我们...

    腾讯Bugly

扫码关注云+社区

领取腾讯云代金券