vue-canvas生成海报图

- 日理万妓 2022-09-07 06:39 151阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70]

### 此图为生成的海报图。 ###

git链接：`https://github.com/sunniejs/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 ###

### 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][https_blog.csdn.net_inmarry_article_details_105552070]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70]: /images/20220829/2175b9df225344e9a01ffb0105a1dece.png
[https_blog.csdn.net_inmarry_article_details_105552070]: https://blog.csdn.net/inmarry/article/details/105552070