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

简介: 自己整理的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");
      });
    },

当然,这里面的部分代码也是从网上看的别人的,拼拼凑凑出来的,我在他们的基础上改了改。

然后我们就实现生成海报的功能啦。

相关文章
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
7天前
|
JavaScript
|
6天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
8天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
8天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
8天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
20 1
|
8天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
32 0
|
8天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
13天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
23 1
|
14天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint