一款 uniapp 微信小程序生成海报插件

推荐一款自己开发的uniapp插件，用来生成微信小程序海报，朋友圈海报，商品海报。

• 插件地址：ext.dcloud.net.cn/plugin?id=4…

• 效果展示

• 使用起来也很简单

第一步导入插件

import Poster from '../../../components/zhangyuhao-poster/Poster.vue'

然后在components中声明

export default {
    components: {
        Poster
    }
}

在template中使用

<poster v-if="list.length" :list="list" background-color="#FFF" :width="750" :height="1334" @on-success="posterSuccess" ref="poster"></poster>

一个完整代码示例

<template>
    <view>
        <!-- 此处用于展示生成的图片 -->
        <image :src="poster" style="width: 750rpx;height: 1334rpx;"></image>
        <!-- 生成图片 -->
        <poster v-if="list.length" :list="list" background-color="#FFF" :width="750" :height="1334"
            @on-success="posterSuccess" ref="poster"></poster>
    </view>
</template>

<script>
    import Poster from '../../../components/zhangyuhao-poster/Poster.vue'
    export default {
        components: {
            Poster
        },
        data() {
            return {
                poster: '',
                list: []
            };
        },
        mounted() {
            this.list = [{
                    type: 'image',
                    // path替换成你自己的图片，注意需要在小程序开发设置中配置域名
                    path: 'https://xxx.aliyuncs.com/20221009/61bdd760d7634381968c1142a21174e4.jpg',
                    x: 0,
                    y: 0,
                    width: 750,
                    height: 750
                },
                {
                    type: 'image',
                    path: 'https://xxx.aliyuncs.com/qr_code/org_7.jpg',
                    x: (750-200) / 2,
                    y: 880,
                    width: 200,
                    height: 200
                },
                {
                    type: 'text',
                    x: 20,
                    y: 780,
                    text: '童装卫衣2022秋季新款',
                    size: 38,
                    color: '#000'
                }
            ]
        },
        methods: {
            posterSuccess(url) {
                // 生成成功，会把临时路径在这里返回
                this.poster = url;
                console.log(url)
            }
        }
    }
</script>

其余的参数在文档中都有介绍，感谢支持