自己整理的vue实现生成分享海报(含二维码),看着网上的没实现

Posted 穆雄雄

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自己整理的vue实现生成分享海报(含二维码),看着网上的没实现相关的知识,希望对你有一定的参考价值。

大家好,我是雄雄。

前言

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

  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";
  1. 在页面上写个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>
  1. 大致设置一下样式吧,在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%;

  1. data中声明变量:
 data: function() 
    return 
   // 文案标题
      posterTitle: "",
      // 文案内容
      posterContent: "",
      // 最终生成的海报图片
      posterImg: "",
      isShowBg: false,
      //是否显示对话框
      dialogFengXiang: false
      ;
     ,
  1. 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");
      );
    ,

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

以上是关于自己整理的vue实现生成分享海报(含二维码),看着网上的没实现的主要内容,如果未能解决你的问题,请参考以下文章

vue实现随机生成分享海报(内容动态)

用工具实现在微信里面生成带二维码的海报?

开源)嗨,Java,你可以生成金山词霸的二维码分享海报吗?

PHP实现生成推广海报的方法

jsjq动态生成海报+动态生成二维码+Logo图片

Java生成二维码分享海报