html
<div ref="imageWrapper" class="iswap" id="imageWrapper">
<!--这里是省略的html内容-->
</div>
css
#imageWrapper{
width: 340px;
height: 480px;
overflow: visible !important;
}
js，由于canvas在绘制过程中
async down(){
var _this = this
window.scrollTo(0, 0); //如果你的窗口滚动的话需要，
let imageWrapper = document.getElementById('imageWrapper')
await html2canvas(imageWrapper, {
x: imageWrapper.getBoundingClientRect().left + 13, // 绘制的dom元素相对于视口的位置，由于获取的位置比原本往前偏离的所以要加上，你需要根据自己的视图去计算
y:imageWrapper.getBoundingClientRect().top, // top没有偏离所以不用修改
backgroundColor: null, // 解决生成的图片有白边，只单单加和这个并没有效果
width:imageWrapper.offsetWidth - 15, // 因为多出的需要剪裁掉，
height:imageWrapper.offsetHeight,
useCORS: true,
scale:3, // 因为生成图片会模糊，但是这个会使下载的图片变大，可以使用base64压缩
dpi: window.devicePixelRatio, //z
}).then(canvas => {
const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
const finalImageSrc = "data:image/jpeg;base64," + img
// 添加a标签用于下载
const aElem = document.createElement('a')
document.body.appendChild(aElem) // 223kb
aElem.href = finalImageSrc
// 图片下载名
aElem.download = "erwei.jpg"
aElem.click()
document.body.removeChild(aElem) // 完成后移除
})
},
