html2canvas生成海报白边以及文字被遮挡问题

1. 如何在vue3中使用html2canvas

npm install --save html2canvas
生成海报：

<template>
    <div class="poster-box" ref="posterBox">
        <div class="thumb"><img src="@assets/goods.jpg" alt=""></div>
        <div class="goods-info">
            <div class="title-box">
                <div class="title">情侣装男女白色黑色T恤太空漫步宇航员默认发白色需要其他颜色请备注</div>
                <div class="price">￥99.9</div>
            </div>
            <div class="code">二维码</div>
        </div>
    </div>
    <div class="btn" @click="initPoster">生成海报</div>
    <img v-if="showImg" :src="posterUrl" class="poster" alt="">
</template>
<script>
import html2canvas from 'html2canvas'
import { ref, unref } from 'vue'
export default {
    setup() {
        const showImg = ref(false)
        const posterBox = ref(null)
        const posterUrl = ref(null)
        const initPoster = () => {
            html2canvas(unref(posterBox), {
                width: unref(posterBox).getBoundingClientRect().width,  
                height: unref(posterBox).getBoundingClientRect().height
            }).then(canvas => {
                posterUrl.value = canvas.toDataURL('image/jpeg')
                showImg.value = true;
            });
        }
        return {
            initPoster,
            showImg,
            posterBox,
            posterUrl
        }
    }
}
</script>
<style lang="scss" scoped>
.poster-box {
    width: 5.5rem;
    height: 7.4rem;
    background: #fff;
    padding: .15rem;
    .thumb {
        width: 100%;
        height: 5.2rem;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .goods-info {
        margin-top: .2rem;
        display: flex;
        justify-content: space-between;
        .code {
            width: 1.4rem;
            height: 1.4rem;
            line-height: 1.4rem;
            text-align: center;
            color: #fff;
            background: #ddd;
            margin-left: .1rem;
        }
        .title-box {
            width: 0;
            flex: 1;
        }
        .title {
            text-align: justify;
            font-size: .3rem;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .price {
            color: red;
            font-size: .32rem;
            font-weight: bold;
            margin-top: .2rem;
        }
    }
}
.poster {
    width: 5.5rem;
}
</style>

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;的方法也试了，但是效果不行。

20220117
今天发现，如果只是单行的文字超出隐藏，是不需要放到span中就可以的，但是单行超出隐藏的css要这样写：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;