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

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

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

1、js截屏插件html2canvas.js

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

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

注意事项：

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

html：

<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.location.href= imgUri // 下载图片

js截屏以及three.js场景截屏相关推荐

Node.js 在微医的应用场景及实践
我是来自微医集团消费事业群的前端工程师高翔,这篇文章整理自我在<第一届缤纷前端技术沙龙>的主题分享<Node.js 在医疗行业的应用>,介绍了 Node.js 在微医的发展历程 ...
js bind 传参、_Node.js 在微医的应用场景及实践
我是来自微医集团消费事业群的前端工程师高翔,这篇文章整理自我在<第一届缤纷前端技术沙龙>的主题分享<Node.js 在医疗行业的应用>,介绍了 Node.js 在微医的发展历程 ...
js获取今天剩余时间_Node.js 在微医的应用场景及实践
我是来自微医集团消费事业群的前端工程师高翔,这篇文章整理自我在<第一届缤纷前端技术沙龙>的主题分享<Node.js 在医疗行业的应用>,介绍了 Node.js 在微医的发展历程 ...
android获取状态栏截屏按钮状态,关于代码截屏带状态栏的问题
昨天产品经理告诉我,希望能实现仿网易严选那样,可以捕捉到用户的截屏操作,然后进行截屏分享的小功能. 在实现的过程中遇到的最大问题就是截屏为什么没有状态栏???然后各种查找,资料聊聊无几,只有大神Ope ...
js大屏导出图片_超大图片全屏动态展示js插件
intense-images是一款非常实用的超大图片全屏动态展示js插件.该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好 ...
[js] script所在的位置会影响首屏显示时间吗
[js] script所在的位置会影响首屏显示时间吗会,如果script放在头部,js的执行会阻塞dom树的构建个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
js自动篡改页面url地址 - 场景篇
js自动篡改页面url地址 - 场景让用户感觉是多个专栏页面(更正规感) 主要代码: // 获取当前url var url = document.URL, //获取当前页面的网址信息URL;var ...
滚动截屏软件_华为指关节截屏不如三指截屏好用？一步到位，实践出真知
华为手机的指关节截屏功能想必只要是用过的朋友都知道,熟悉的朋友更会以此为依赖,比如我,现在换了个其他品牌手机用,一到截屏的时候还是会不由自主地拿指关节划区截屏,因为指关节截屏不仅仅是双击截屏,这个划区 ...
php 锁屏,fcode-页面九宫格自动锁屏js插件
fcode.js 自动锁屏插件 fcode.js是什么? fcode.js是一款web页面九宫格自动锁屏js插件,依赖于jquery, 会在设置的范围里,判断用户有无操作,然后执行锁屏的功能. 就一个 ...

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

js截屏以及three.js场景截屏相关推荐

最新文章

热门文章