html2canvas 使用注意点
最近在搞一个截图的东西，遇到了一些问题，所以贴出代码，方便大家一次性解决开发中会遇到的问题。本篇文章解决了截图不完整，图片跨域，截图空白，截图带背景颜色（没有背景图片的代码），分辨率低，截图与实际元素位置偏差等问题
首先贴出 插件基础配置参数（请仔细阅读注释）
html2canvas 配置参数
| 名称 | 默认 | 描述 |
|---|---|---|
| useCORS | false | 是否尝试使用CORS从服务器加载图像 |
| allowTaint | false | 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法 |
| proxy | null | 代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。 |
| backgroundColor | #ffffff | 画布背景色（如果未在DOM中指定）。设置null为透明 |
| canvas | null | 现有canvas元素用作绘图的基础 |
| foreignObjectRendering | false | 如果浏览器支持，是否使用ForeignObject渲染 |
| imageTimeout | 15000 | 加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。 |
| ignoreElements | (element) => false | 谓词功能，可从渲染中删除匹配的元素。 |
| logging | true | 启用日志以进行调试 |
| onclone | null | 克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。 |
| removeContainer | true | 是否清除html2canvas临时创建的克隆DOM元素 |
| scale | window.devicePixelRatio | 用于渲染的比例。默认为浏览器设备像素比率。 |
| width | Element 宽度 | canvas的宽度 |
| height | Element 高度 | canvas的高度 |
| X | Element X偏移 | 裁剪画布X坐标 |
| ÿ | Element y偏移 | 裁剪画布y坐标 |
| scrollX | Element 滚动X | 渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed） |
| scrollY | Element 滚动Y | 呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed） |
| windowWidth | Window.innerWidth | 渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容 |
| windowHeight | Window.innerHeight | 渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容 |
插件二次封装，详细请看注释
插件部分
// 获取截图
export const getHtmlImage = async (options={}) => {
let { canvasBox, canvasBoxOffsetLeft, canvasBoxOffsetTop, canvasBoxOffsetHeight } = options
// 大概估算出，图片最大面积为maxPixels，超出只能舍弃一些分辨率，判断请转到scale配置
const maxPixels = 880 * 3270 * 0.85;
console.log('getHtmlImage 配置项=》》》》》》',options)
return new Promise (async (resolve, reject) => {
if (!canvasBox) {
resolve(null)
return
}
let domWidth = canvasBox.offsetWidth
let domHeight = canvasBoxOffsetHeight || canvasBox.offsetHeight
console.log(domWidth, domHeight)
//定时为了解决页面太长，未加载出来时就截图，导致图片不完整
setTimeout(() => {
html2canvas(canvasBox, {
// allowTaint: true, //是否允许跨域，会对canvas造成污染，导致无法使用canvas.toDataURL 方法
useCORS: true, //是否允许跨域
// proxy: 'https://test.test.com',
backgroundColor: '#fff', //解决生成图片有白色背景方法，设置为null
width: domWidth,
height: domHeight,
x: canvasBoxOffsetLeft || canvasBox.offsetLeft,
y: canvasBoxOffsetTop || canvasBox.offsetTop,
// x: 397,
// y: 490,
scale: maxPixels / (domWidth*domHeight) > 1 ? 1 : maxPixels / (domWidth*domHeight),
}).then((canvas)=>{
if(canvas){
let dataUrl = canvas.toDataURL('image/png'); // image/png ， image/jpg
console.log('dataUrl=>>>>>>>>',dataUrl)
// let newImg = document.createElement("img");
// // //newImg.style = "display:none;"; //如果要导出，这儿可以隐藏，然后用canvas2image搞定
// newImg.src = dataUrl;
// document.body.appendChild(newImg);
resolve(dataUrl)
}else{
resolve(null)
}
});
}, 500);
})
}
普通直接截取某个元素，直接调用方法
// 截图模块
let canvasBox = this.document.querySelector('.canvasBox') || null
// await接收图片地址
let url = await getHtmlImage({canvasBox})
解决截图元素是定位的，导致截图位置偏差，高度计算不准，截图空白的问题，position: fixed
// 截图模块
let canvasBox = this.document.querySelector('.canvasBox') || null
let scrollTop = document.documentElement.scrollTop
// 左侧计算方法， 元素距离屏幕左侧的距离
let canvasBoxOffsetLeft = canvasBox ? canvasBox.getBoundingClientRect().left : 0;
// 顶部计算方法， 元素距离顶部距离 + body滚动高度
let canvasBoxOffsetTop = canvasBox ? canvasBox.offsetTop + scrollTop : 0;
// await接收图片地址
let url = await getHtmlImage({
canvasBox,
canvasBoxOffsetLeft,
canvasBoxOffsetTop
})
如有写得错误/改进的地方，可回复评论
网友评论