自己整理的vue实现生成分享海报（含二维码），看着网上的没实现

Posted 2022-12-26 穆雄雄

大家好，我是雄雄。

前言

相信大家在许多的场景下，看到过这样的案例。

1. 当我们在某购物app上看好一件商品，想分享给别人时，app会给我们生成一张海报，我们将其保存在手机里面转发给其他人达到分享。
2. 当我们逛CSDN的时候，想要将某篇有营养的文章分享给别人时，也会生成一张好看的海报，用户只需一扫码，既能跳转到相应页面浏览。
3. 在某些个人博客，比如：穆雄雄的博客中，我们看到某篇正合胃口的文章，想要分享给别人怎么办？也会生成一张精美小海报，然后随便转发。

今天，我们就来看看，如何使用vue实现精致海报的分享。

效果图

类似这样的吧，下面的是CSDN的，上面的是我自己做的，可能不如CSDN做的专业，但是我的那种，你的背景图片是可以自己换的，所以如果你的审美比较好，那么你可以自己设计一个背景图，或者多张进行随机切换，我这边就是提供一下实现思路。

右下角是这篇文章的二维码，一扫就自动跳转过来了。

实现思路

1. 准备一张精美的背景图，比如我这样的。（也可以准备多张，实现随机切换，实现代码我明天放上来），我的放在了七牛云里面了，大家也可以直接放在本地。
   
2. 将当前内容生成一个二维码，放在右下角的位置，技术：qrcodejs2
3. 将html转换成canvas，技术：html2canvas
4. 按照自己想要的格式调整下样式即可。

其实思路，我看网上大家都是这么说的，我确实也是这么做的，但是按照网上的代码，确实也没有实现出来，所以自己写了个。

代码实现

1. 安装qrcodejs2以来

npm i qrcodejs2

2. 安装html2canvas依赖

npm i html2canvas

3. 在需要生成海报的页面，分别导入这两个依赖。

/*引入二维码*/
import QRCode from "qrcodejs2";
//html转换成canvas
import html2canvas from "html2canvas";

4. 在页面上写个div，用来存放海报的，我这是放在了el-dialog里面了，各人有各人的需求。

<!--分享海报的弹出层-->
    <el-dialog
      width="20%"
      height="200px"
      center
      :visible.sync="dialogFengXiang"
    >
      <!-- 海报html元素 -->
      <div id="posterHtml" v-show="isShowBg">
        <div class="fx_content ">
          <span style="color: #000000;font-size: 16px"> posterTitle </span>
          <p style="font-size: 12px;">
            关注微信订阅（公众）号【雄雄的小课堂】;
            <br />
            博客网址：https://www.穆雄雄.com
          </p>
        </div>
        <!-- 二维码 -->
        <div id="qrcodeImg" ref="qrcodeImg"></div>
      </div>
    </el-dialog>

5. 大致设置一下样式吧,在style里面写：

/*分享的内容*/
.fx_content 
  width: 70%;
  float: left;
  margin: 109% 0 0 2%;

/*整个海报*/
#posterHtml 
  background-image: url(https://blogobs.88688.team/blog/fx-bg1.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 450px;
  background-size: 100% 450px;
  margin: 0;
  padding: 0;

/*二维码*/
#qrcodeImg 
  width: 25%;
  height: 150px;
  float: right;
  margin-top: 108%;

6. 在data中声明变量：

 data: function() 
    return 
   // 文案标题
      posterTitle: "",
      // 文案内容
      posterContent: "",
      // 最终生成的海报图片
      posterImg: "",
      isShowBg: false,
      //是否显示对话框
      dialogFengXiang: false
      ;
     ,

7. 在methods中实现两个功能，生成二维码和生成海报：

//分享的功能
    fenxiang() 
      this.createPoster();
      this.createQrcode();
      this.dialogFengXiang = true;
    ,

    // 生成二维码
    createQrcode() 
      this.$refs.qrcodeImg = "";
      setTimeout(() => 
        // 生成二维码
        new QRCode(this.$refs.qrcodeImg, 
          text: this.articleHref,
          width: 75,
          height: 75,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        );
      , 200);
      // qrcode.makeCode(text);
    ,

    //生成海报
    createPoster() 
      // 生成海报
      const vm = this;
      //重新弄一下标题
      //let content = this.article.content.substring(0,110);
      /*let content = "";
      this.posterContent = content+"....";*/

      this.posterTitle = this.article.title.substring(0, 12) + "....";
      const domObj = document.getElementById("posterHtml");
      //显示海报
      this.isShowBg = true;
      html2canvas(domObj, 
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) 
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        
      ).then(function(canvas) 
        // 在微信里,可长按保存或转发
        vm.posterImg = canvas.toDataURL("image/png");
      );
    ,

当然，这里面的部分代码也是从网上看的别人的，拼拼凑凑出来的，我在他们的基础上改了改。
然后我们就实现生成海报的功能啦。