1.0.12 • Published 1 year ago
watermark-image-uniapp v1.0.12
water-mark-image 水印图片上传组件
版本: 1.0.12 描述: 修复相机不能关闭问题; 新支持水印位置百分比设置;
版本: 1.0.11 描述: 为图片添加水印并上传。支持选择相册图片、相机拍照图片、微信文件（'doc', 'docx', 'pdf', 'xlsx', 'xls'）。微信文件不支持添加水印。目前只支持 vue2.x 版本的 uniapp 小程序端。
作者: BBYx0011
日期: 2024-02-26 15:18:00
更新日志
- 1.0.11 新增 组件相机窗口新增水印预览;
1.0.7 修复已知问题;
组件使用说明
1. 引入组件
// main.js
import watermarkImage from 'watermark-image-uniapp/components/watermark-image/watermark-image.vue'; // 水印组件2. 注册组件
// main.js
Vue.component('watermark-image', watermarkImage); // 注册组件3. 调用组件
在 Vue 文件中：
<watermark-image :action="action" :watermark="watermark" :showPopup.sync="showPopup" :showPreview.sync="showPreview"
@on-success="handleGetFile"></watermark-image>4. 参数说明
| 参数名 | 是否必传 | 描述 |
|---|---|---|
upId | 否 | 组件ID; |
action | 是 | 上传参数 {url: 'url地址', header: 'header对象,包含token等header参数', formData: '上传文件的formData对象'}; |
showPopup | 是 | 是否显示选择上传类型弹窗; |
showPreview | 否 | 是否显示图片预览(组件是以弹窗形式预览的, 上传图片或文件后需要预览的时候需要传个参数); |
uploadType | 否 | 上传方式列表, 默认为 ['album', 'camera', 'chat'], 分别对应的是相册, 相机, 微信文件, 如果传参, 则只显示对应的上传方式; |
watermark | 否 | 水印配置, 不传则不添加水印; [{type: 'text', text: '水印文字', color: '水印颜色', font: '水印字体及大小', x: '水印文字x轴坐标', y: '水印文字y轴坐标'}], color 和 font 可以不传, color 默认白色; |
quality | 否 | 图片压缩质量, 默认60; |
5. 事件
| 事件名 | 描述 |
|---|---|
on-success | 上传成功回调, 回调参数为接口返回的报文 data; |
on-error | 上传失败回调, 回调参数为接口返回的报文 data; |
6. 完整示例
<template>
<view>
<input type="text" v-model="form.fileUrl" />
<button @click="showPreview = true">图片预览</button>
<button @click="showPopup = true">上传图片</button>
<watermark-image :action="action" :watermark="watermark" :showPopup.sync="showPopup" :showPreview.sync="showPreview"
:uploadType="uploadType" @on-success="handleGetWaterMarkImage" @on-error="handleGetUploadError"></watermark-image>
</view>
</template>
<script>
import watermarkImage from 'watermark-image-uniapp/components/watermark-image/watermark-image.vue'; // 这里是按需引入注册组件, 也可以在main.js里全局引入注册组件
import { uploadFile } from '@/api/common' // 引入上传接口, 这里要替换你自己的上传接口
export default {
components: { // 这里是按需引入注册组件, 也可以在main.js里全局引入注册组件
'watermark-image': watermarkImage
},
data() {
return {
action: { // 图片上传接口
url: uploadFile, // 这里替换你的上传接口
header: { // 这里替换你的 header
AuthToken: uni.getStorageSync('token'),
responseType: 'json'
},
formData: { // 这里替换你的 formData
model: 'qscheckFile',
relatedId: '',
type: ''
},
},
showPopup: false, // 是否显示水印弹窗
watermark: [{ // 水印
type: 'text',
text: '经度: 80.2562',
x: 20,
y: 660
},
{ // 水印
type: 'text',
text: '维度: 125.2222',
x: 20,
y: 685
},
{
type: 'text',
text: '时间: 2024.10.29 12:30 星期一',
x: 20,
y: 710
},
],
uploadType: ['album', 'camera'], // 上传类型
// 你的其他数据...
}
},
methods: {
// 上传成功, 接收接口返回的数据
handleGetWaterMarkImage(res) {
console.log('res:', res) // 这里的 res 是你的上传接口返回的 response.data
},
// 上传失败, 接收接口返回的数据
handleGetUploadError(err) {
console.log('err', err) // 这里的 err 是你的上传接口返回的 response.data
},
// 你的其他方法...
}
}
</script>