vue自定义生成海报

1.安装插件  npm i vue-canvas-poster --save

2.多端生成网站 快速开始 | fastposter官方文档

1.在main中引入

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

2.页面配置以及引用

<template>
  <div class="filmManagerBox">
   <div class="content_container">
     <vue-canvas-poster v-if="painting.views[0].url" :widthPixels="595" :heightPixels="842" :painting="painting" @success="success" @fail="fail">
    </vue-canvas-poster>
    <img :src="posterImg" id="mypic">
 </div>

  </div>
</template>

<script>
import zTable from "../../components/zTable";
import zSelectBox from "../../components/zSelectBox";
import axios from "axios";
import { post } from '@/utils/request';
export default {
  components: { zTable, zSelectBox },
  name: "index",
  data() {
    return {
    painting: {
        position: 'relative',
        width: '595px',
        height: '842px',
        background: require('背景图'),
        views: [
          {
            type: 'image',
            url: "图片地址",
            css: {
              position: 'absolute',
              right: '30%',
              top: '25%',
              color: '#000',
              background: '#fff',
              width: '250px',
              height: '250px',
              borderWidth: '40px',
              borderColor: '#fff',
            },
          },
 {
                        type: "qrcode",
                        content: "",
                        background: "transparent",
                        css: {
                            bottom: "350px",
                            left: "0",
                            right: "275px",
                            color: "#000",
                            background: "#fff",
                            width: "0px",
                            height: "0px",
                            borderWidth: "10px",
                            borderColor: "#fff",
                        },
                    },
{
                        type: "text",
                        text: "",
                        css: {
                            top: "36%",
                            right: "13.5%",
                            width: "325px",
                            maxLines: 1,
                            textAlign: "center",
                            fontSize: "70px",
                            color: "#0068B7",
                        },
                    },



        ],
      },
       posterImg: "",
    };
  },
  mounted(){
    this.initDataTable()
  },
  methods: {
    initDataTable() {
      this.loading = true;
      this.$request
        .post(
          `/fuwu/b/oauth2/token?grant_type=client_credentials&client_id=799AD54639DAF036F620F41F69966591&client_secret=A045451BF0BE04D3232666DBDC30298E&shop_id=4021811469917&shop_type=business_operation_system_id`,
          {}
        )
        .then((res) => {
        console.error("error",error)
        });
    },

   // 海报生成
    success(src) {
      this.posterImg = src

    },
//赋值
 handleUpdateBg(row) {
      this.posterImg = ''
      this.painting.views[0].url = row.qrUrl
    },

  },
};
</script>

<style lang="scss" scoped>
.Mcontainer {
  /* min-width: 1600px !important; */
  padding: 0px 20px 20px 20px;
}
.v-page-header {
  display: flex;
}
.v-page-header-title {
  width: 60%;
  overflow: hidden;
  font-weight: 400;
  font-size: 28px;
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
h2 {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 30px;
}

.columrefaul {
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: left;
  align-content: center;
  align-items: center;
  gap: 3px;
}

.bstatusRadioox {
  display: flex;
  align-items: center;
  align-content: center;
  text-align: left;
}
</style>