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>