更新记录
1.0.0(2024-04-27)
下载此版本
支持文本,在线图片,二维码生成,可自由配置文本,图片,二维码位置,文本大小,粗细,字体颜色等配置,图片支持圆角、圆形等设计,二维码支持前景色,背景色,中间loggo等配置
平台兼容性
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>