通过 html2canvas 生成海报截图导致图片模糊的优化方法

最新推荐文章于 2025-01-22 15:43:16 发布

原创

最新推荐文章于 2025-01-22 15:43:16 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #前端

1.问题基本信息

使用vue制作h5页面，需求是生成带二维码的海报进行分享。

通过qrcodejs2生成指定url路径的二维码

通过使用html2canvas生成指定div的截图信息

问题：生成的海报模糊

2.解决办法

不多废话直接贴关键代码

body部分：

  <div class="poster_bg">
    <div class="share_title">
      <p style="margin: 0.5rem">长按图片保存并转发</p>
<!--      <p style="margin-bottom: 0.5rem"></p>-->
    </div>
    <div class="gift-card" id="content" :style="hintBg"  ref="content" >
      <img  alt="logo" :src="getImgUrl(cardId)"  @load="createPoster()" style="width: 90%;margin-top: 1rem">
        <div class="gift-card-desc">
          <div class="desc-left">
            <span class="desc-title" >长按识别/扫描二维码</span>
            <br>
            <span class="desc-subtitle">即刻开启学霸之旅</span>
          </div>
          <div class="desc-right"  id="qrcode">
          </div>
        </div>