平台兼容性

海报生成组件

组件使用

运行下面demo时，注意图片路径，可以上淘宝随便找些图片测试

<template>
    <view>
        <posters-layer
            :postersData="postersData"
            @success="onSuccessCreatePosters"
            @error="onPostersError">
        </posters-layer>
        <img :src="posterImg.path" />
    </view>
</template>
<script>
import postersLayer from '../../components/posters-layer/index';
export default {
    data() {
        return {
            postersData: {},
            posterImg: {}
        };
    },
    components: {
        postersLayer
    },
    onLoad() {
        this.initPostersConfig();
    },
    methods: {
        initPostersConfig() {
            const config = {
                clear: true,
                width: 660,
                height: 850,
                background: '#ffffff',
                views: [
                {
                    type: 'image',
                    width: 660,
                    height: 660,
                    top: 0,
                    left: 0,
                    // 封面图，测试的时候填上
                    url: 'http://127.0.0.1:8080/static/images/test/1.jpg'
                },
                {
                    type: 'text',
                    width: 400,
                    height: 50,
                    left: 20,
                    top: 680,
                    fontSize: 30,
                    lineHeight: 40,
                    bolder: true,
                    breakWord: true,
                    content: '        Apple/苹果 iPhone XR 移动联通电信全网通版 苹果xr iphonexr 苹果xr手机 iphone xr',
                    MaxLineNumber: 2
                },
                {
                    type: 'rect',
                    width: 70,
                    height: 34,
                    left: 20,
                    top: 684,
                    background: '#ff4201',
                    radius: 8
                },
                {
                    type: 'text',
                    width: 400,
                    height: 50,
                    left: 20,
                    top: 690,
                    fontSize: 24,
                    lineHeight: 40,
                    bolder: true,
                    breakWord: true,
                    content: ' 活动',
                    color: '#ffffff',
                    MaxLineNumber: 2
                },
                {
                    type: 'text',
                    width: 400,
                    left: 20,
                    top: 770,
                    fontSize: 54,
                    bolder: true,
                    breakWord: true,
                    content: '￥0.0',
                    color: '#F40',
                    MaxLineNumber: 2
                },
                {
                    type: 'image',
                    width: 140,
                    height: 140,
                    top: 680,
                    left: 500,
                    // 二维码图片路径，测试的时候填上
                    url: 'http://127.0.0.1:8080/static/images/test/qr.png'
                },
                ]
            };
            this.postersData = config;
        },
        onSuccessCreatePosters(res) {
            console.log(res);
            this.posterImg = res;
        },
        onPostersError(res) {}
    }
}
</script>

组件参数解释

config字段

views字段

文本

矩形

图片

事件

success 海报生成成功时触发

error 海报生成失败时触发