更新记录
1.0.0(2024-09-28) 下载此版本
第一版
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.21 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | √ | × | × | × | × |
组件名:photo-watermark
代码块:
photo-watermark
功能:图片添加打卡水印 信息可以自己改 可以自己改源码
注意:只测试了APP 和 微信小程序 其他没测试 微信小程序不支持 没时间排查原因 后续有时间再说 发布只是为了自己以后项目需要可以直接用 不好用的话 那就换一个
API
lfj-dropdown-box Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
imgUrls | Array | - | 图片地址 |
textData | Object | {name: '',address: '',phoneNumber: '',weather: '',otherInformation: ''} | 需要显示的信息(不显示为空就行) |
typeColor | String | '#0BB28D' | 是否禁用 |
@lower | getIMG | event(Array) | 返回添加水印的图片 |
示例
<photo-watermark :imgUrls="imgUrls" :typeColor="typeColor" :textData="textData" @getIMG="getIMG"></photo-watermark>
<button type="primary" @click="photograph">拍照</button>
<image :src="item" mode="aspectFit" v-for="(item, index) in images" :key="index" @click="previewPictures(item)"></image>
photograph() {
let that = this;
uni.chooseImage({
count: 1, //默认9
sourceType: ['camera'],
sizeType: ['compressed'], // 一定要用压缩图
success: ({ tempFilePaths, tempFiles }) => {
// 这里就得到了带水印的图片路径列表
that.imgUrls = tempFilePaths;
}
});
},
// 得到水印照片
getIMG(e) {
console.log(e);
},
previewPictures(e) {
// 预览图片
uni.previewImage({
urls: [e]
});
}