更新记录

1.0.11（2024-03-15）

1.0.11 新增 组件相机窗口新增水印预览;

平台兼容性

npm 安装插件

版本: 1.0.11

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

作者: BBYx0011

日期: 2024-02-26 15:18:00

更新日志

• 1.0.11 新增 组件相机窗口新增水印预览;
• 1.0.7 修复已知问题;

组件使用说明

0. 安装组件

npm install watermark-image-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>