更新记录

1.0.0(2024-04-27) 下载此版本

支持文本,在线图片,二维码生成,可自由配置文本,图片,二维码位置,文本大小,粗细,字体颜色等配置,图片支持圆角、圆形等设计,二维码支持前景色,背景色,中间loggo等配置


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.13 app-vue × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

dl-poster

属性名 类型 默认值 说明
width string,number 750 canvas宽度
height string,number 1500 canvas高度
canvasId string canvasId canvasid
bgColor string #fff canvas默认背景色
posters Array 海报生成数据,详见下列

posters 属性说明

属性名 类型 默认值 说明
type string 类型,支持 text, image, qr
text string 文本内容,支持text、qr
x number 内容显示的x轴
y number 内容显示的y轴
width number 内容宽度文本自动超出隐藏,图片为宽度,qr暂不支持
height number 图片高度,其余暂不支持
align string 文本显示位置
baseLine string 文本显示基线
line number 1 文本显示行数默认为1行,超出使用省略号
more boolean false 优选级高于line 是否显示所有行数, 默认 false
size number 14 文本显示大小默认14px,type为qr时为二维码大小
color string 文本显示颜色
url string 图片链接,仅支持image
radius number (值 <= 50时默认显示圆形,图片默认居中显示,width / 2为圆形居中显示)默认值0
qrBg string 二维码背景色
background string #fff 二维码+padding背景色,默认#fff
foreground string 二维码前景色
pdground string 二维码定位角点颜色
lv string 二维码容错级别
icon string 二维码图标
iconsize string 二维码图标大小
padding string 二维码内边距

示例

当使用type属性时,需确认后端接口传入的字段名,此案例dictLabel,dictValue不传递,默认使用"dictLabel","dictValue"

<template>
    <view>
        <dl-poster bgColor="#fff" @change="posterChange" ref="poster" :posters="posters"></dl-poster>
        <button  @click="posterClick">点击生成海报</button>
        <image mode="widthFix" style="width: 750rpx;" :src="posterImg"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                posterImg: '',
                title: 'Hello',
                posters: [
                    {
                        type: "image",
                        x: uni.upx2px(30),
                        y: uni.upx2px(30),
                        width: uni.upx2px(690),
                        height: uni.upx2px(966),
                        url: "https://p0.pipi.cn/mmdb/25bfd68de7adddddd2395b4c04f4737cd31fc.jpg?imageMogr2/thumbnail/1246x1246%3E"
                    },
                    {
                        type: "image",
                        x: uni.upx2px(80),
                        y: uni.upx2px(1100),
                        width: uni.upx2px(100),
                        height: uni.upx2px(966),
                        radius: 60,
                        url: "https://p0.pipi.cn/mmdb/25bfd68de7adddddd2395b4c04f4737cd31fc.jpg?imageMogr2/thumbnail/1246x1246%3E"
                    },
                    {
                        type: "qr",
                        x: uni.upx2px(560),
                        y: uni.upx2px(1020),
                        text: "这是二维码",
                        size: 80,
                        radius: 50,
                        background: '#fff'
                    },
                    {
                        type: "text",
                        x: uni.upx2px(160),
                        y: uni.upx2px(1050),
                        text:"这是商品头部",
                        size: "20"
                    },
                    {
                        type: "text",
                        x: uni.upx2px(160),
                        y: uni.upx2px(1110),
                        text:"这是商品描述这是商品描述这是商品描述",
                        width: uni.upx2px(350),
                        size: "16",
                        line: 2
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            posterClick() {
                this.$refs.poster.create()
            },
            posterChange(e) {
                this.posterImg = e
            }
        }
    }
</script>

<style>
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问