在vue3中使用html2canvas生成海报及问题总结

1. 如何在vue3中使用html2canvas

npm install --save html2canvas
生成海报：

2. 生成的图片白边问题

在某些机型上生成的图片，右边和下边会有白边，如下图：

解决方法：

html2canvas(unref(posterBox), {
    // 加上宽高以后，白边消失，如右图
    width: unref(posterBox).getBoundingClientRect().width,  
    height: unref(posterBox).getBoundingClientRect().height,
}).then(canvas => {
    const dataURL = canvas.toDataURL('image/png');
})

开始获取宽高的时候用的，unref(posterBox).offsetWidth，但是在某些机型下还是有白边，
因为用unref(posterBox).offsetWidth获取到的宽度是整数，例如图片宽度是273.59，获取到的宽度是274，所以右边会出现白边。而unref(posterBox).getBoundingClientRect().width获取到小数位的宽度，白边就没有了。

3. 生成的海报，文字被遮挡问题

这个问题，在安卓上没问题，但是ios上就会被遮挡，
解决方法：把标题的文字每一个字都放到一个span中，再渲染就正常了
参考：https://github.com/niklasvh/h...
设置letter-spacing: 1px;的方法也试了，但是效果不行。