water-mark-image 水印图片上传组件

版本: 1.0.14 描述: 修复相机画面水印预览时不支持百分比坐标的问题;

版本: 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>