vue H5页面实现海报功能demo

最新推荐文章于 2024-01-10 09:36:10 发布

want、

最新推荐文章于 2024-01-10 09:36:10 发布

阅读量2.6k

点赞数

分类专栏： canvas

本文链接：https://blog.youkuaiyun.com/javaScript_want/article/details/103168132

版权

canvas 专栏收录该内容

3 篇文章

订阅专栏

demo展示地址：(扫描图片二维码即可体验)
在这里插入图片描述
1.准备插件 qrcanvas和html2canvas（npm装好）

2.html代码（布局按个人喜好）

<template>
  <div>
      <!-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片，然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src-->
    <img v-if="!test" :src="imgSrc" alt />
    <div v-else>
      <img src="~@/assets/images/qrcode/timg.jpeg" alt />
      <div id="qrcode"></div>

      <button @click="btn">点我生成一张海报(记得长按页面保存哦))</button>
    </div>
  </div>
</template>

3.js代码

<script>
//生成一个二维码
import { qrcanvas } from "qrcanvas";
//将整个页面转换成canvas
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      test: true,
      imgSrc: ""
    };
  },
  mounted() {
    this.$nextTick(() => {
      //生成一个二维码 data是二维码跳转的地址（写自己需要跳转的地址即可）
      const canvas = qrcanvas({
        data: location.href
      });
      document.getElementById("qrcode").appendChild(canvas);
    });
  },
  methods: {
    btn() {
        //点击生成canvas转换成base64的图片
      this.$nextTick(() => {
        const that = this;
        html2canvas(document.body).then(function(canvas) {
          console.log(canvas.toDataURL());
          that.imgSrc = canvas.toDataURL();
        });
        //隐藏元素
        this.test = false;
      });
    }
  }
};
</script>