照片添加水印 如何加时间地址图片水印

正常来讲，还是在后端加比较好，

不过我这有个前端组件，你可以试试

<ImageWatermarkPicker v-model="checkItem.execDevImg" :key="1" limit="1"  
                                :waterText='waterAddress' :imageStyles="imageStyles" @change="changeDevFile"  
                                @deleteFile='devDeleteFile'>  
                            </ImageWatermarkPicker>

<template>  
    <view class="image-picker">  
        <uni-file-picker v-model="imageValue" :auto-upload="false" :title="title" :limit="limit"  
            :image-styles="imageStyles" :file-mediatype="fileMediatype" :mode="mode" @select="select"  
            @delete="deleteFile" :sourceType="['camera']">  
        </uni-file-picker>  
        <view class="watermark-canvas">  
            <canvas id="watermark-canvas" :style="{ width: canvasWidth, height: canvasHeight }"  
                canvas-id="watermark-canvas" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        name: 'ImageWatermarkPicker',  
        props: {  
            limit: {  
                type: [Number, String],  
                default: 1,  
            },  
            title: {  
                type: String,  
                default: null,  
            },  
            mode: {  
                type: String,  
                default: 'grid',  
            },  
            fileMediatype: {  
                type: String,  
                default: 'image',  
            },  
            imageStyles: {  
                type: Object,  
                default: null,  
            },  
            watermark: {  
                type: Boolean,  
                default: true,  
            },  
            waterText: {  
                type: String,  
                default: '未知'  
            },  
            // #ifdef VUE3  
            modelValue: {  
                type: Array,  
                default () {  
                    return []  
                },  
            },  
            // #endif  

            // #ifndef VUE3  
            value: {  
                type: Array,  
                default () {  
                    return []  
                },  
            },  
            // #endif  
        },  
        emits: ['input', 'update:modelValue'],  
        data() {  
            return {  
                imageValue: [],  
                canvasWidth: '1080px',  
                canvasHeight: '2160px',  
                sourceType: [  
                    ['camera']  
                ]  
            }  
        },  
        watch: {  
            imageValue(newVal) {  
                // #ifdef VUE3  
                this.$emit('update:modelValue', newVal)  
                // #endif  
                // #ifndef VUE3  
                this.$emit('input', newVal)  
                // #endif  
                this.$emit('change', newVal)  
            },  
            // #ifndef VUE3  
            value: {  
                handler(newVal) {  
                    this.imageValue = newVal  
                },  
                immediate: true,  
            },  
            // #endif  
            // #ifdef VUE3  
            modelValue: {  
                handler(newVal) {  
                    this.imageValue = newVal  
                },  
                immediate: true,  
            },  
            // #endif  
        },  
        methods: {  
            checkImage(url) {  
                const checkNum = 5  
                let currentCheckNum = 1  

                return new Promise((resolve, reject) => {  
                    process()  

                    function process() {  
                        uni.getImageInfo({  
                            src: url,  
                            success: function(image) {  
                                resolve(image)  
                            },  
                            fail: function(err) {  
                                if (checkNum <= currentCheckNum) {  
                                    uni.showToast({  
                                        title: '图片上传失败',  
                                        icon: 'none'  
                                    })  
                                    reject(err)  
                                } else {  
                                    currentCheckNum++  
                                    const timer = setTimeout(() => {  
                                        clearTimeout(timer)  
                                        process()  
                                    }, 300)  
                                }  
                            },  
                        })  
                    }  
                })  
            },  
            deleteFile(e) {  
                this.$emit('deleteFile', e)  
            },  
            async select(e) {  
                uni.showLoading({  
                    title: '正在处理照片...'  
                })  
                for (let tempFile of e.tempFiles) {  
                    await this.watermarkProcess(tempFile)  
                }  
            },  
            async watermarkProcess(tempFile) {  
                const {  
                    name,  
                    size,  
                    extname,  
                    uuid,  
                    path  
                } = tempFile  
                let url = null  
                // 添加水印  
                if (this.watermark) {  
                    url = await this.addWatermark(path)  
                }  
                // 上传图片  
                // url = await this.uploadFile(path)  
                // 检测图片，确保图片存在  
                await this.checkImage(url)  
                this.imageValue = [  
                    ...this.imageValue,  
                    {  
                        name,  
                        extname,  
                        url,  
                        size,  
                        uuid,  
                    },  
                ]  
            },  
            async addWatermark(tempFilePath) {  
                return new Promise((resolve, reject) => {  
                    uni.getImageInfo({  
                        src: tempFilePath,  
                        success: async (res) => {  
                            // 设置画布高度和宽度  
                            this.canvasWidth = `${res.width}px`  
                            this.canvasHeight = `${res.height}px`  
                            await this.sleep(200) // 某些平台 canvas 渲染慢，需要等待  

                            const ctx = uni.createCanvasContext('watermark-canvas', this)  
                            ctx.clearRect(0, 0, res.width, res.height)  
                            ctx.beginPath()  
                            ctx.drawImage(tempFilePath, 0, 0, res.width, res.height)  

                            // 水印 字体大小，颜色，内容，位置  
                            ctx.beginPath()  
                            ctx.setFontSize(50)  
                            ctx.setFillStyle('rgba(0,255,0,0.8)')  
                            ctx.fillText(this.waterText, 60, res.height - 150)  

                            ctx.fillText(this.dateUtils.formatDateYMDHMS(new Date().getTime()), 60,  
                                res.height - 80)  

                            // 开始绘制 (canvas -> 临时文件路径)  
                            ctx.draw(false, async () => {  
                                await this.sleep(300) // 某些平台 canvas 渲染慢，需要等待  

                                uni.canvasToTempFilePath({  
                                        canvasId: 'watermark-canvas',  
                                        destWidth: res.width,  
                                        destHeight: res.height,  
                                        fileType: 'jpg',  
                                        quality: 0.8,  
                                        success: (fileRes) => {  
                                            resolve(fileRes.tempFilePath)  
                                        },  
                                        fail: (err) => {  
                                            console.log('[Error draw]', err)  
                                            uni.showToast({  
                                                title: err.errMsg,  
                                                icon: 'none'  
                                            })  
                                            reject()  
                                        },  
                                    },  
                                    this,  
                                )  
                            })  
                        },  
                        fail: (err) => {  
                            console.log('[Error getImageInfo]', err)  
                            uni.showToast({  
                                title: err.errMsg,  
                                icon: 'none'  
                            })  
                            reject()  
                        },  
                    })  
                })  
            },  
            async uploadFile(path) {  
                const formData = {  
                    'params.bizType': 'xxx',  
                    'params.tags': 'xxx',  
                    'meta.code': 'xxxx',  
                    'meta.client': 'uniapp',  
                    'meta.tag': 'xxx',  
                    'meta.time': new Date().getTime(),  
                }  

                const res = await uni.uploadFile({  
                    url: `${process.env.VUE_APP_BASE_URL}/file/upload`,  
                    filePath: path,  
                    name: 'params.files',  
                    formData,  
                    header: {  
                        Authorization: uni.getStorageSync('accessToken'),  
                    },  
                })  

                return JSON.parse(res[1].data).data.filePaths[0]  
            },  
            sleep(millisecond) {  
                return new Promise((resolve) => {  
                    setTimeout(resolve, millisecond)  
                })  
            },  
        },  
    }  
</script>  

<style lang="scss">  
    .image-picker {  
        position: relative;  

        .form-item-column-center {  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            flex: 1;  
            flex-direction: column;  
        }  

        .watermark-canvas {  
            position: absolute;  
            top: 5px;  
            left: 5px;  
            width: 1px;  
            height: 1px;  
            overflow: hidden;  
        }  
    }  
</style>