此图为生成的海报图。

git链接：https://github.com/sunniejs/vue_canvas_poster
文档：https://sunniejs.github.io/vue-canvas-poster/#/

1、通过cnpm安装

cnpm i vue-canvas-poster --save

2、全局注册-在main.js中引用

/*canvas*/
import CanvasPoster from 'vue-canvas-poster'
 
Vue.use(CanvasPoster)

3、html

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

4、数据

posterImg: '',//生成的海报
                painting: {
                    width: '550px',
                    height: '876px',
                    background: 'https://ddcz.oss-cn-beijing.aliyuncs.com/images/file-1587004539522R5oa.png',
                    views: [{
                        type: 'image',
                        url: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIxbEZu0fBQOYlTLTpqtoezkNiaCBQ4ZXZAKhvPiaFAdI91vBsUkpiaDH4mp4qGvcVo2EaxRrp5fMia8w/132',
                        css: {
                            top: '20px',
                            left: '36px',
                            borderRadius: '40px',
                            width: '80px',
                            height: '80px',
                        },
                    }, {
                        type: 'text',
                        text: '我的名字',
                        css: {
                            top: '48px',
                            left: '136px',
                            width: '360px',
                            maxLines: 1,
                            fontSize: '26px',
                        },
                    }, {
                            type: 'qrcode',
                            content: 'https://zy.jishiyoo.com/m/card/group?key=5PCxqmV7oF3D0wx3WnbnPLRlbunt7A',
                            css: {
                                bottom: '50px',
                                right: '26px',
                                color: '#000',
                                background: '#fff',
                                width: '130px',
                                height: '130px',
                                borderWidth: '10px',
                                borderColor: '#fff'
                            },
                        },],
                },

5.js

//成功生成海报
            success(src) {
                this.posterImg = src;
                console.log(src)
            },
            fail(err) {
                alert(err)
            },

6.css

img {
        width: 100%;
        height: 100%;
    }

转载于https://blog.csdn.net/inmarry/article/details/105552070