vue截图功能的实现

vue截图功能的实现

安装

npm install   html2canvas -D

需要截图的页面引入 

import html2canvas from 'html2canvas'

需要截图的容器加 ref

<div ref="imageTofile" class="dashboard-container home-box">

toImage() {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等html2canvas(this.$refs.imageTofile, {backgroundColor: null,useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题}).then((canvas) => {const url = DataURL('image/png')this.htmlUrl = urlconsole.log('生成的url',this.htmlUrl)// 把生成的base64位图片上传到服务器,生成在线图片地址// this.sendUrl()  //上传})},

toImage是开始截图的函数，调用即可。

注意

页面中含有视频截图出来视频部分是黑屏。这个应用场景主要是注入日志。调试错误。页面崩溃时写入日志等。