首先不会像其它文章一样把文档搬过来解释一边。而是在实际项目中实际使用来写。

前言

网上可以查到的方法有几种，有使用canvas截图的还有使用插件截图的。这里我是用html2canvas插件就是图它的比较易用，下面就是我实际使用和使用中遇到的坑来讲解一下。

一、用前须知

1、首先根据文档上的描述，它是根据页面上所展示的dom元素进行截图。
2、还有一定的限制，并不是所有的css样式都有作用。但是不用担心大部分是支持的。这是一个官方支持css属性的链接附上css属性支持列表
3、最重要的一点就是图片要是同源的。如果图片跨域就会导致截图之后图片丢失，我也遇到了，下面会说解决办法。

二、项目实际使用

1、项目描述

1、项目需求是根据页面所展示内容生成海报，并长按进行图片保存
2、页面中展示的海报是api返回（存在跨域问题）

2、使用步骤

1、页面中的主要结构自己写就好，每个需求不一样
2、安装

npm install html2canvas
import html2canvas from 'html2canvas';

3、使用

onMakePicture() {//这是选择你要进行截屏的domconst dom = this.$refs.picDomhtml2canvas(dom).then(function (canvas) {// console.log('canvas',canvas)const link = document.createElement("img");link.src = canvas.toDataURL();link.style.width = "100%";link.style.height = "100%";link.style.position = "absolute";link.style.top = "0";link.style.left = "0";dom.appendChild(link);});},

3、图片跨域问题

1、由于直接由api返回的图片为在线图片，所以必然跨域，所以可以想到的解决办法就是将图片转为base64，那转为base64的图片可以由前端转也可以由后端转。当然自己要试一试，可以是多方尝试，还是跨域，最后没办法还是请后端的同学转了，可以正常显示了。

4、css样式问题

1、我是将接口返回的图片使用background-image来设置的，这样显示没什么问题，但是发现在使用html2canvas的时候在电脑的浏览器中测试没有发现任何问题，也能正常生成图片，但是经过手机测试，发现没生成。可能是由于手机没有电脑处理速度快，在遍历dom元素时，由于图片的base64字符串太长，所以来不及渲染出来，所以导致背景图片丢失，所以猜用img标签，让在加载dom的时候就把背景图片加载好。
额外知识：
1、页面结构先加载，让你后时css。
2、html2canvas是通过遍历你所需要生成截图的dom元素进行构造的图片。

最后

附上文档链接：html2canvas

采坑一时爽，一直采坑一直爽。
如果有问题欢迎指出。
如果有帮助欢迎常来。

js截屏工具(html2anvas)相关推荐

java浏览器无界面后台截屏工具
不同于上一篇文章中所讲到的通过客户端浏览器将 HTML 转 canvas 再生成图片的方式,本次记录的内容为服务器端(Windows Server)截屏工具.该工具特点为:通过 java 代码调用无界 ...
mac idea用自带的maven还是_苹果电脑自带截图工具怎么用？mac自带截屏工具使用技巧分享
一说到截图工具我们脑袋里最先跳出来应该是 QQ 和微信等社交软件自带的截图工具,这里小编为大家推荐的是经常被忽昭略的mac自带截屏工具.也许你想不到苹果自带截图工具功能是十分的强大的. mac自带截屏 ...
截屏工具Snipaste使用指南
Snipaste 是一个简单但强大的贴图工具,同时也可以执行截屏.标注等功能. 开始截图快捷键(默认为 F1) 鼠标左键单击托盘图标何为一次成功的截图保存到剪贴板 ( Ctrl + C / E ...
怎么抓取屏幕截图计算机考试时间,定时抓屏快照(电脑截屏工具)V4.8 最新版
定时抓屏快照(电脑截屏工具)是一款非常实用的电脑屏幕定时抓拍软件.想定时截取电脑屏幕?定时抓屏快照(电脑截屏工具)轻松帮助用户.马上要放假了,家长一定很担心小孩最新的上网情况,看是在电脑上玩什么,用户 ...
截屏工具、录屏工具不能用？是因为这个！！
我的截屏工具Snipaste.exe取色功能时,老是打不开取色功能界面. 另外,我的录屏软件 Movavi Screen Recorder 11 老是打不开. 今天,360突然跳出来,说已成功拦截多少 ...
SAIL-IMX7D开发板截屏工具gsnap移植
PC机:ubuntu 14.04.5 开发板:SAIL-IMX7D 交叉编译器:arm-linux-gnueabihf-gcc PC机操作目录:/opt/work/tools/gsnap.没有自行新建 ...
嵌入式截屏工具-gsnap移植 arm平台
目录前言正文原理环境详细流程使用参考前言由于工作的需要,需要交叉编译一个嵌入式截屏工具,通过网上的查询,用的比较多的就是gsnap.网上也有比较多的资料,参考里的资料基本就是我参考的 ...
Tools_@截屏工具@OCR识别工具@图片文字翻译工具长截屏,普通截屏套件推荐(by QQ)@鼠标键盘动作录制
文章目录 Tools_@截屏工具@OCR识别工具@图片文字翻译工具长截屏,普通截屏套件推荐(QQ自带) 全局录屏/长截屏: OCR 优点不足 quicker动作鼠键录制工具
Windows CE/Moblie截屏工具及实现源码
Windows CE/Moblie截屏工具及实现源码 [img]http://dl2.iteye.com/upload/attachment/0084/6997/c72941f2-b86e-3683- ...

js截屏工具(html2anvas)

目录

前言