vue canvas画海报

安装:

npm install html2canvas --save
npm i qrcanvas --save

html:

       <div>
      <!-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片，然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src-->
    <img v-if="!test" :src="imgSrc"   alt />
    <div v-else>
//src图片可以替换成自己想要的图片
      <img src="~@/images/invitation/theme_icon.png" alt />
      <div id="qrcode"></div>
      <div id="invitation">测试数据啊,使用id,只生成这个内容啊</div>  
      <button @click="btn">点我生成</button>
 <button @click="btn">保存到本地</button>
    </div>
  </div>

js:

<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;
//document.body生成整个页面的内容document.getElementById('invitation')生成某个id为invitation的内容
        html2canvas(document.getElementById('invitation')).then(function(canvas) {
          console.log(canvas.toDataURL());
          that.imgSrc = canvas.toDataURL();
        });
        //隐藏元素
        this.test = false;
      });
    },
  //保存邀请函到本地
    // 下载邀请函
    generatorImage() {
        let link = document.createElement("a");
        link.href = this.imgSrc;//下载链接
        link.setAttribute("download","邀请函.png");
        link.style.display = "none";//a标签隐藏
        document.body.appendChild(link);
        link.click();
    },
  }
};
</script>

参考网址:

https://blog.csdn.net/weixin_45389051/article/details/105493364

https://www.cnblogs.com/shcs/p/11960593.html