关于vue3:在vue3中使用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; 的办法也试了，然而成果不行。