html2canvas截图问题

html2canvas截图问题

填坑填坑 此处填个坑，项目中用到了html2canvas来把一个分享的弹窗，合成图片再分享出去，然后因为自己太菜了，掉坑里了一顿折腾，所幸后来填了坑，此篇记录一下，给大伙排坑！！！

如果想更深入学习，可自行查看官网： /

1.安装 npm install --save html2canvas 或者 yarn add html2canvas

2.页面引入 import html2canvas from ‘html2canvas’

3.html2canvas截图不全的问题， 我排查了很久，最后发现是布局的问题，好吧，那只能改

html2canvas 不认识height: 100%，建议更改为100vh，但是要想要两端固定中间滚动的话，中间自适应更好flex：1，这样就实现头部底部固定中间可滑动啦~

html2canvas截图是对整个DOM进行截图

 <img :src="refShareContext" style="border: 1px solid red" alt="" />

const handleClickCreateCanvasImg = () => {const shareContextDom = document.querySelector('.share-context')! as HTMLElementreturn html2canvas(shareContextDom, {scrollY: 0,useCORS: true,scale: window.devicePixelRatio,}).then((canvas) => {refShareContext.value = DataURL('image/png', 1.0)// replace('data:image/png;base64,', '') 转base64})}

4.截图图片被拉伸的以及不清晰问题

涉及图片基本处理

归根结底还是因为html2canvas 不认识object-fit: cover;，那么如何实现图片裁剪呢，可以通过用img标签来引入，再用div包裹住img，通过定位处理成和背景一样，这样图片就清晰了，

<div v-for="(item, index) in computedShareListImgClip" :key="index" class="photo-wall__warper--item"><img :src="item.picture + '?imageView2/1/w/588/h/738/q/95'" alt="" />
</div>//?imageView2/1/w/588/h/738/q/95 图片分辨率，让图片更快加载

.photo-wall__warper--item {width: 196px;height: 246px;border-radius: 20px;overflow: hidden;margin-top: 32px;margin-left: 33px;display: flex;justify-content: center;position: relative;img {width: 100%;}}

很简单的操作，我卡了蛮久，总而言之，还是学习的少哈哈哈哈