vue生成海报（vue-canvas-poster）

安装 vue-canvas-poster 插件

npm i --save vue-canvas-poster 

封装成组件（微信长按保存图片）

<template>
    <div class="talent_poster">
        <vue-canvas-poster
            :widthPixels="1000"
            :painting="painting"
            @success="canvasSuccess"
            @fail="canvasFail"
        ></vue-canvas-poster>
        <img :src="posterImg" />
        <div class="tipTxt">长按保存或分享</div>
        <!--关闭-->
        <div style="width: 100%; text-align: center">
            <div class="cancleBtn" @click="$emit('hideposter')">
                <span id="close"></span>
            </div>
        </div>
    </div>
</template>
<script>
import wx from "weixin-js-sdk";
export default {
    middleware: "",
    props: {},
    components: {},
    data() {
        return {
            showPoster: true,
            posterImg: "", //生成的海报
            painting: {
                width: "750px",
                height: "1168px",
                background: "",
                views: [
                    {
                        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",
                        },
                    },
                    {
                        type: "text",
                        text: "",
                        css: {
                            top: "44%",
                            right: "13.5%",
                            width: "325px",
                            maxLines: 1,
                            textAlign: "center",
                            fontSize: "70px",
                            color: "#0068B7",
                        },
                    },
                ],
            },
        };
    },
    created() {},
    methods: {
        open(item) {
            if (item.paintingWidth || item.paintingHeight) {
                this.painting.width = item.paintingWidth;
                this.painting.height = item.paintingHeight;
            }
            this.painting.background = item.bgImg;
            this.painting.views[0].content = item.codeUrl;
            this.painting.views[0].css = item.css;
            if (item.textObj) {
                this.painting.views[1].text = item.textObj.txt1;
                this.painting.views[2].text = item.textObj.txt2;
            }
        },
        canvasSuccess(src) {
            this.posterImg = src;
        },
        canvasFail(err) {
            alert(err);
        },
        saveImg() {
            wx.saveImageToPhotosAlbum({
                filePath: this.posterImg,
                success(res) {},
                fail(err) {
                    console.log(err);
                },
            });
        },
    },
};
</script>
<style lang="less" scoped>
.talent_poster {
    position: fixed;
    width: 80%;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    margin: 0 auto;

    img {
        width: 100%;
        height: 100%;
        margin-bottom: 10px;
    }

    .tipTxt {
        text-align: center;
        color: #ccc;
    }
}
</style>
 

使用组件

let data = {
    paintingWidth: '816px',
    paintingHeight: '1219px',
    bgImg:‘’,
    codeUrl:‘’,//网页地址
    css: {
       bottom: '14.5%',
       left: '0',
       right: '34.5%',
       width: '260px',
       height: '260px',
   },
}
this.$refs.invitePoster.open(data)

效果