使用html2canvas开发页面截图需求

前端开发中如果需要把页面或者某一部分保存成图片  可以用到html2canvas

首先npm install html2canvas

然后 页面引入import html2canvas from 'html2canvas'

下面是具体代码

// template 部分
<div ref="imageWrapper" class="newworklz newworklzjietu">
</div>
<img class="screensimg" :src="screenshotUrl" alt="" />

// js部分
const imageWrapper = ref(null) //要截图的div盒子的ref
const screenshot = async () => {
	html2canvas(imageWrapper.value, {
		useCORS: true, // 使用跨域
	}).then((canvas) => {
		const imageDataURL = canvas.toDataURL('image/png') // 到这里已经拿到base64的图片了
		screenshotUrl.value = imageDataURL // 如果图片需要回显在页面上 直接赋值给img标签就行

        // 这一段是base64转成file文件的代码  需要上传给后端的才写
		let base64Data = imageDataURL.split(',')[1]
		let binaryData = atob(base64Data)
		let uint8Array = new Uint8Array(binaryData.length)
		for (let i = 0; i < binaryData.length; i++) {
			uint8Array[i] = binaryData.charCodeAt(i)
		}
		// 获取blob文件流
		let blob = new Blob([uint8Array], { type: 'image/png' })
		// 文件流转文件
		let file = new File([blob], '文件名.png', {
			type: 'image/png',
		})
		
	})
}

还有一个问题  最近发现vue3项目里用html2canvas截出来的图和实际的页面内容会有出入，具体的坑在于假如字体是24px  行高是30px 页面上是垂直居中的 但是截出来的标题 他就是偏下很多

我的解决办法是写了两个页面内容（两套样式  截图用的那一套样式标题偏上 截出来就是居中的） 另一块页面内容 我用fixed定位 加left -9999 top -9999 藏出屏幕之外  对于用户来讲无感知 看不见就行 避免了所见和截图不一样的问题