Vue项目实现生成图(也可以叫做海报)，通过canvas

我们是不是都做过问卷调查？就是让你填一些或者选择一些东西，然后填写完了会生成一张图，上面有你的名字，填的什么，一些二维码啊等，这个图片可以保存到手机，可以分享，也可以扫描图中的二维码，那么这个是怎么实现的呢？

其实有很多种方法，下面来举例一种

首先你需要两个插件
qrcanvas，html2canvas

在终端安装

sudo cnpm install html2canvas --save
sudo cnpm i qrcanvas --save

首先html

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

      <button @click="btn">点我生成</button>
    </div>
  </div>
</template>

script中，先引入两个插件

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

    export default {
  data() {
    return {
      test: true,
      imgSrc: ""
    };
  },
  methods: {
    btn() {
          //生成一个二维码 data是二维码跳转的地址（写自己需要跳转的地址即可）
      const canvas = qrcanvas({
        data: location.href   
      });
      document.getElementById("qrcode").appendChild(canvas);
        //点击生成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>