uni-app照片视频加水印

在uni-app中实现给照片或视频添加水印，可以利用Canvas进行图像处理，对于视频则需要借助第三方库或原生插件。以下是一个简单的示例，展示如何给图片添加水印。

给图片添加水印

首先，确保你的uni-app项目已经创建并配置好。

1. 创建水印函数

在utils目录下创建一个addWatermark.js文件，内容如下：

export function addWatermark(imagePath, watermarkText, outputPath) {
    return new Promise((resolve, reject) => {
        const ctx = uni.createCanvasContext('watermarkCanvas');
        uni.getImageInfo({
            src: imagePath,
            success: (imgInfo) => {
                const { width, height } = imgInfo;
                ctx.drawImage(imagePath, 0, 0, width, height);
                ctx.setFontSize(20);
                ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); // 半透明白色水印
                ctx.fillText(watermarkText, 10, height - 10); // 右下角水印
                ctx.draw(false, () => {
                    uni.canvasToTempFilePath({
                        canvasId: 'watermarkCanvas',
                        success: (res) => {
                            resolve(res.tempFilePath);
                        },
                        fail: (err) => {
                            reject(err);
                        }
                    });
                });
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
}

2. 在页面中使用水印函数

在你的页面脚本中引入并使用该函数，例如在pages/index/index.vue中：

<template>
    <view>
        <image :src="originalImage" style="width: 100%;"></image>
        <image :src="watermarkedImage" style="width: 100%; margin-top: 20px;"></image>
    </view>
</template>

<script>
import { addWatermark } from '@/utils/addWatermark.js';

export default {
    data() {
        return {
            originalImage: '/static/images/example.jpg', // 替换为你的图片路径
            watermarkedImage: ''
        };
    },
    onLoad() {
        addWatermark(this.originalImage, 'Sample Watermark', '/temp/watermarked.jpg')
            .then(path => {
                this.watermarkedImage = path;
            })
            .catch(err => {
                console.error('添加水印失败:', err);
            });
    }
};
</script>

<style>
/* 添加样式根据需要 */
</style>

3. 在页面中添加Canvas

在页面的模板部分或者<style>标签中添加一个隐藏的Canvas元素：

<canvas canvas-id="watermarkCanvas" style="display: none;"></canvas>

这样，你就成功地在uni-app中为图片添加了水印。对于视频添加水印，通常需要使用原生开发或第三方库，因为Canvas处理视频较为复杂且性能受限。