乐趣区

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

退出移动版