vue生成分享海报

最新推荐文章于 2025-02-06 17:54:04 发布

洪荒小仙女

最新推荐文章于 2025-02-06 17:54:04 发布

阅读量1.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue项目文章标签： html5 canvas vue css 前端

本文链接：https://blog.csdn.net/weixin_45546220/article/details/105013030

本文介绍了在Vue项目中生成分享海报的实现过程，通过QRCode生成二维码并结合html2canvas合成海报。在实现过程中，提到了动态图片跨域问题和在微信旧版本中隐藏canvas的技巧。分享了完整的代码步骤，并欢迎大家提问交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的项目里面涉及到分享海报的问题，今天就给大家分享一下，自己中间也遇到也很多问题，中间也有很多不足的地方，有什么问题，欢迎大家指教。
效果图
在这里插入图片描述
实现原理
先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64
实现步骤：
1.安装QRCode和html2canvas

npm i qrcode
npm i html2canvas

2.在页面中引用

import QRCode from "qrcode";
import html2canvas from "html2canvas";

3.HTML代码

<template>
  <div>
    <div class="top">
      <div @click="getimg">
        <span>分享</span>
        <p>海报</p>
      </div>
    </div>
    <div class="ypl-flex">
      <div class="invitePosterPage flex">
        <div v-if="posterDataUrl">
          <van-popup v-model="show">
            <div class="oter">
              <img :src="posterDataUrl" class="poster-bg" alt="邀请海报" />
            </div>
          </van-popup>
        </div>
        <div v-else id="poster" class="flex-row">
          <img class="poster-bg" src="../../assets/images/timg.jpg" alt="邀请海报背景" />
          <div class="qqqqq">
            <div class="title ">【{
   
   {
   
   canvasImg.title