记录vue3+Vant+html2canvas实现生成海报功能（包含头像和二维码）

懒洋洋懒羊羊

已于 2024-09-19 17:19:30 修改

阅读量752

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-09-18 17:31:52 首次发布

本文链接：https://blog.youkuaiyun.com/m0_45827438/article/details/142338917

版权

思路：头像是微信获取头像，二维码由后端返回的活动的二维码

HMTL代码：

    <div class="share-btn">
      <van-button class="btn-class" @click="toImg">个人海报</van-button>
    </div>
    <!-- 海报 -->
    <van-popup v-model:show="popupShow" @closed="closPop">
      <div class="popup" v-show="postShow">
        <div id="html-canvas">
          <div class="poster">
            <img
              class="poster-img"
              :src="scoreImage"
              crossorigin="anonymous"
              alt=""
            />
            <div class="head-img">
              <img
                :src&