安装依赖

npm i vue-canvas-poster --save

引入

//main.js
import VueCanvasPoster from "vue-canvas-poster";
Vue.use(VueCanvasPoster);

使用

<template>
  <div class="poster">
    <vue-canvas-poster
      :widthPixels="0"
      :painting="painting"
      @success="success"
      @fail="fail"
    ></vue-canvas-poster>
    <img :src="posterImg" />
  </div>
</template>

<script>
export default {
  name: "Poster",
  components: {},
  data() {
    return {
      painting: {
        width: "376px",
        height: "667px",
        top: "0px",
        background: require("@/assets/img/share/share-bg.png"),
        views: [
          {
            type: "image",
            url: require("@/assets/img/share/share-img.png"),
            css: {
              top: "572px",
              left: "33.5px",
              borderRadius: "100%",
              width: "54px",
              height: "54px"
            }
          },
          {
            type: "image",
            url: require("@/assets/img/share/share-link.png"),
            css: {
              top: "564px",
              left: "272.5px",
              borderRadius: "100%",
              width: "70px",
              height: "70px"
            }
          },
          {
            type: "text",
            text: "需要努力的人",
            css: {
              top: "578px",
              left: "99.5px",
              color: "#333333",
              fontSize: "15px"
            }
          },
          {
            type: "text",
            text: "长按识别二维码加入我们吧！",
            css: {
              top: "603.5px",
              left: "99.5px",
              color: "#666666",
              fontSize: "11px"
            }
          }
        ]
      },
      posterImg: ""
    };
  },
  created() {},
  mounted() {},
  methods: {
    success(src) {
      this.posterImg = src;
    },
    fail() {
      console.log("fail");
    }
  }
};
</script>

<style scoped lang="scss">
.poster {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none; //阻止长按二维码会放大，并且出现分享、等操作
  }
}
</style>