html2canvas

一.应用场景

最近的一个需求在页面里提供意见截图然后跳转到反馈页面

二.工作原理

html2canvas是通过获取到DOM 然后通过canvas将这个DOM下的东西画出来转化成base64的方式来实现的只要你div下的东西都可以将其转化出来如果只想要视口里的东西则可以画body下的

三.应用过程

1.首先当然是安装依赖呀

npm i html2canvas -S

2.其次就是应用了

因为需要截屏视口跳转前端没有真正那种像QQ 微信那种手动截屏的工具

所以就用到了这个html2canvas

上代码：首先写一个事件

<div class="samediv"><el-tooltipclass="box-item"effect="dark"content="一键拍照"placement="left-start"><el-button plain @click="takephotos"><el-icon><Camera /></el-icon></el-button></el-tooltip>
</div>

其次在事件里写上html2canvas

takephotos() {
// 获取你想截屏的大盒子  获取那个盒子的DOM  就截取那个盒子  我这里截取的是body  当前视口let save2 = document.body;html2canvas(save2).then((canvas) => {let url = canvas.toDataURL("image/png");let aLink = document.createElement("a");aLink.style.display = "none";aLink.href = url;// console.log(aLink.href);// router.push({name: 'menu', query: {'src': aLink.href}})// aLink.download = "截图.png";// document.body.appendChild(aLink);// aLink.click();// document.body.removeChild(aLink);window.localStorage.setItem("src", aLink.href);router.push({ name: "menu" });});
},

这里的aLink.href就是base64转码出来的内容打印一下就是这样的

注：获取当前视口可以取body 也可以去vue里id为app的那个盒子但是取这个盒子就截屏不到element的消息提示框或者是dialog框

html2canvas相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
html转换pdf 分页,(html2canvas jspdf)html转pdf带分页
1.下载npm包 npm i html2canvas jspdf -s 2.页面引入 import html2canvas from 'html2canvas'; import jsPDF from ...
移动端 html2canvas 踩坑记录
背景最近在做的微信 html5 项目有个需求:页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片,让用户长按保存的时候,可以把整个页面都保存起来,而不是只保存二维码. 思考 1. ...
html2canvas如何在元素隐藏的情况下生成截图
html2canvas官网地址:http://html2canvas.hertzen.com/ github地址:https://github.com/niklasvh/html2canvas/ 从官 ...
Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）
最近碰到个需求,需要把当前页面生成pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/... html ...
页面整体居中左右出现白边html,html2canvas生成图片出现白边儿的解决方法
将页面上的内容生成图片,并显示到弹出层中: 不废话,解决方法主要是再js中,html2canvas 方法中,全部拷贝过去就能用 html // 需要生成图片的内容区域生成图片分享给朋友长按图片保 ...
html2canvas 截图div_浏览器端网页截图方案详解
简介剖析流行的截图插件 html2canvas 的实现方案,探索其功能上的一些不足之处及不能正确截取的一些场景,比如不支持 CSS 的 box-shadow 截取情况等.探索一种新的实现方式,能够避 ...
JS 使用html2canvas实现截图功能的问题记录和解决方案
JS 使用html2canvas实现截图功能的问题记录和解决方案参考文章: (1)JS 使用html2canvas实现截图功能的问题记录和解决方案 (2)https://www.cnblogs.co ...
html2canvas图片截图截不到图像的问题解决
html2canvas图片截图截不到图像的问题解决参考文章: (1)html2canvas图片截图截不到图像的问题解决 (2)https://www.cnblogs.com/netcorner/p/ ...
html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...

html2canvas

一.应用场景

二.工作原理

三.应用过程

html2canvas相关推荐

最新文章

热门文章