1、使用html2canvas.js之前,要先下载,因为我的项目的是JQuery,我直接在官网上下载html2canvas.min.js
下载地址:https://github.com/niklasvh/html2canvas/releases
2.html2canvas.js的基本使用
html2canvas的配置地址:
http://html2canvas.hertzen.com/configuration
element是你想要截图的DOM元素
let element = document.querySelector("firstPhoto");
let imgWidth = element.offsetWidth;
let imgHeight = element.offsetHeight;
window.pageYOffset = 0;
document.body.scrollTop = document.documentElement.scrollTop = 0;
let configObj = {
allowTaint: true,
useCORS: true,
tainttest: true, // 检测每张图片都已经加载完成
logging: true,
scale: 2, //画布的宽度用于渲染的比例。 默认为浏览器设备像素比。
dpi: 300, //提高截图的精度
width: imgWidth, //画布的宽度
height: imgHeight, //画布的高度
backgroundColor: `rgb(143,40,37)`, // 转换图片可能会有白色底色,你可根据你的页面或者PM 要求设置一下背景色,不要的话就null
};
//我的项目中有echarts图表,如果不加定时器,就会出现图表的数据还没有渲染完毕,截图的图片已经绘制完成,导致图表数据只显示一部分的情况
setTimeOut(function () {
html2canvas(element, configObj).then((canvas) => {
let imgUrl = canvas.toDataURL("image/jpeg");
//imgUrl是截图后图片的地址,是base64格式的
const aDom = document.createElement('a')
aDom.href = imgUrl
aDom.download = new Date().valueOf() + '.png' // 图片的名字
aDom.click()
});
}, 1000);
注意点:
1.字体如果是渐变色,html2canvas是无法渲染的,背景色是可以的
2.如果截取的图片中有echarts图表,可能出现图表数据渲染不全的问题,我的解决方法是:
setTimeOut(function () {
html2canvas(element, configObj).then((canvas) => {
let imgUrl = canvas.toDataURL("image/jpeg");
//imgUrl是截图后图片的地址,是base64格式的
const aDom = document.createElement('a')
aDom.href = imgUrl
aDom.download = new Date().valueOf() + '.png' // 图片的名字
aDom.click()
});
}, 1000);
2.当你要截图的页面过长的时候,就会出现背景色渲染不全或者是没有渲染的情况,为了保证图片的清晰度,我的解决方法是:将整个页面截取为多张图片,然后用canvas绘制到一张图片上