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;的办法也试了，然而成果不行。