water-mark-image 实现水印图片上传

描述: 为图片添加水印并上传。支持选择相册图片、相机拍照图片、微信文件（‘doc’, ‘docx’, ‘pdf’, ‘xlsx’, ‘xls’）。微信文件不支持添加水印。目前只支持 vue2.x 版本的 uniapp 小程序端。

组件使用说明
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. 参数说明

5. 事件

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>

了解更多内容 关注公众号