Vue 生成海报的插件vue-canvas-poster

一、npm 安装vue-canvas-poster

npm i vue-canvas-poster --save

二 、在main.js 中引入:

import VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)

三、代码如下

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

    <img :src="posterImg" />
  </div>
</template>
<script>
import Vue from "vue";

// 导入组件库
import VueCanvasPoster from "vue-canvas-poster";
// 注册组件库
Vue.use(VueCanvasPoster);
export default {
  data() {
    return {
      painting: {
        width: `${document.documentElement.clientWidth}px`,
        height: `${document.documentElement.clientWidth * 2.0187}px`,
        background: "#f4f5f7",
        views: [
          {
            type: "image",
            url: require("../../static/img/bg1.jpg"),
            css: {
              width: `${document.documentElement.clientWidth}px`,
              height: `${document.documentElement.clientWidth * 2.0187}px`,
              top: "0",
            },
          },
          {
            type: "image",
            url: require("../../static/img/bg1.jpg"),
            css: {
              width: `${document.documentElement.clientWidth / 3.5}px`,
              height: `${document.documentElement.clientWidth / 3.5}px`,
              top: `${document.documentElement.clientWidth / 5.5}px`,
              left: `${document.documentElement.clientWidth / 2.8}px`,
            },
          },
          {
            type: "qrcode",
            content: "19263",
            css: {
              top: `${document.documentElement.clientWidth / 1}px`,
              left: `${document.documentElement.clientWidth / 2.5}px`,
              color: "#333",
              width: `${document.documentElement.clientWidth / 5}px`,
              height: `${document.documentElement.clientWidth / 5}px`,
            },
          },
          {
            type: "text",
            text: "兜兜里裹糖@",
            css: [
              {
                top: `${document.documentElement.clientWidth / 2}px`,
                left: `${document.documentElement.clientWidth / 2.7}px`,
                color: "rgba(52,52,52,1)",
                fontSize: "17px",
              },
            ],
          },
          {
            type: "text",
            text: "- 长按保存二维码 -",
            css: [
              {
                top: `${document.documentElement.clientWidth * 1.5}px`,
                left: `${document.documentElement.clientWidth / 3}px`,
                color: "rgba(52,52,52,1)",
                fontSize: "17px",
              },
            ],
          },
        ],
      },
      posterImg: "",
    };
  },
  computed: {},
  methods: {
    success(src) {
      console.log(src);
      this.posterImg = src;
    },
    fail(err) {
      console.log("fail", err);
    },
  },
};
</script>
<style lang="less" scoped>
.aaa {
  width: 100vw;
  height: 100vh;
  background: rgb(94, 131, 92);
}
</style>

四 、效果图:

五 、文档
Vue Canvas Poster文档：https://sunniejs.github.io/vue-canvas-poster/#/README