vue链接生成二维码网页生成图片保存到本地相册

最新推荐文章于 2023-07-29 11:11:14 发布

Mh_ui

最新推荐文章于 2023-07-29 11:11:14 发布

阅读量2.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Mh_ui/article/details/102684862

版权

该博客介绍了如何在Vue项目中使用qrcodejs2和html2canvas库来生成二维码并将其转换为网页截图，以便保存到本地。重点强调了背景设置要使用img标签而非background属性，以确保生成的图片清晰。

摘要由CSDN通过智能技术生成

npm install qrcodejs2 --save

npm install html2canvas --save

注：背景要用img定位来写，不要用background 不然生成的图片不清晰

<!--分享-->
<template>
  <div class="share">
    <div id="shareHtml">
      <div id="share-body">
        <img class="qr_bg" src="@/assets/share/qr_bg.png"/><!--背景图-->
        <div id="qrcode" ref="qrcode"></div><!--生成的二维码-->
        <span class="share-dec">长按保存二维码</span>
      </div>
    </div>
    <img class="share-img" :src="shareImg"/>
    <div class="black" @click="goBack()"><img src="@/assets/arrow_back.png"/>返回</div>
  </div>
</template>