html2canvas实现页面截屏功能
原理是将需要生成截屏的HTML结构写入Canvas里面,利用Canvas生成页面截图,在浏览器不支持Canvas的情况下,将采用Flashcanvas或ExplorerCanvas技术代替实现
//以vue为例
let that = this;
//由于业务需求是进入页面就要生成截图 所以利用setTimeOut等待页面加载完成时在进行截图
setTimeout(() => { //等待页面渲染完成
// event.preventDefault();
var createCanvas = document.createElement("canvas");
//获取需要生成截图的DOM结构
let Nodes = document.getElementById('Node');
//获取DOM的width,height
var w = parseInt(window.getComputedStyle(Nodes).width);
var h = parseInt(window.getComputedStyle(Nodes).height);
//设置canvas画布
createCanvas.width = w;
createCanvas.height = h;
createCanvas.style.width = w + "px";
createCanvas.style.height = h + "px";
//可以按照自己的需求,对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = createCanvas.getContext("2d");
context.scale(2, 2);
html2canvas(document.getElementById('Node'), {
//关键配置 页面过长会出现白屏情况
canvas: createCanvas,
useCORS: true, //(图片跨域相关)
allowTaint: false, //允许跨域(图片跨域相关)
taintTest: true, //是否在渲染前测试图片
width:window.screen.availWidth, //显示的canvas窗口的宽度
height:window.screen.availHeight, //显示的canvas窗口的高度
windowWidth:document.body.scrollWidth, // 获取X轴方向滚动条中的内容
windowHeight:document.body.scrollHeight, // 获取Y轴方向滚动条中的内容
x:0, // 页面在X轴上没有滚动,故设为0
// y:window.pageYOffset, // 页面在垂直方向的滚动距离
y:80,
}).then(function (canvas) {
//canvas.toDataURL 把画布上的绘制内容以一个 data URI 的格式返回
// 第一个个参数 图片格式 第二个参数 图片质量 取值范围是 0 ~ 1 越大质量最好
var imgUrl = canvas.toDataURL("image/jpeg", 1);
console.log(imgUrl)//生成图片的Bash64路径
});
},1000)
下载生成的截图
//浏览器 利用a标签实现下载 简单粗暴
const a = document.createElement("a");
a.href = dataImg.src;
a.download = "imgUrl";
download.click();
// 移动端实现下载就比较麻烦 项目是采用混合开发的模式
// 所以我就偷了个懒 直接让壳子给我提供下载图片保存到相册
// 我只负责简单的与壳子交互就OK了
//交互方法 把生成的Base64图片路径给壳子
YouJueManager.getInstance().sendYouJueSaveBase64ImageMessage(imgUrl);