使用uni-app实现实时拍照/视频并添加水印

简介

在移动应用开发中，为用户提供拍照或录制视频的功能非常常见。同时，为了保护内容版权或提供额外的信息展示，开发者经常需要在照片或视频上添加水印。本文将介绍如何使用uni-app框架实现实时拍照和录像功能，并在生成的媒体文件上添加自定义水印。

技术栈

uni-app
Vue.js
HTML5
CSS3

准备工作

确保你已经安装了HBuilderX，并且熟悉uni-app的基本开发流程。

创建项目

使用HBuilderX创建一个新的uni-app项目。选择"Hello uni-app"模板来快速搭建基础项目结构。

实现拍照/录像功能

1. 权限请求
   在使用摄像头之前，需要向用户请求相机权限。在main.js中添加如下代码以请求相机权限：

uni.getSetting({
  success: function (res) {
    if (!res.authSetting['scope.camera']) {
      uni.authorize({
        scope: 'scope.camera',
        success() {
          // 用户已经同意授权相机权限
        },
        fail() {
          // 用户拒绝授权相机权限
        }
      });
    }
  }
});

2. 调用拍照/录像功能
   在页面组件中，使用uni-app提供的组件来实现拍照和录像功能。示例代码如下：

<template>
  <view>
    <camera device-position="back" @error="errorHandler" @stop="stopRecord">
      <view class="camera_function_btn" @tap="takePhoto" v-if="isRecording">拍照</view>
      <view class="camera_function_btn" @tap="startRecord" v-else>开始录像</view>
      <canvas canvas-id="watermarkCanvas" style="width: 100%; height: 100%;"></canvas>
    </camera>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
    };
  },
  methods: {
    takePhoto() {
      uni.camera.takePhoto({
        quality: 'high',
        success: res => {
          this.addWatermark(res.tempImagePath);
        }
      });
    },
    startRecord() {
      uni.startRecord({
        success: res => {
          this.addWatermark(res.tempFilePath);
        }
      });
    },
    stopRecord() {
      uni.stopRecord({
        success: res => {
          this.addWatermark(res.tempFilePath);
        }
      });
    },
    errorHandler(e) {
      console.log(e.detail);
    },
    addWatermark(filePath) {
      // 在这里实现添加水印的逻辑
    }
  }
};
</script>

3. 添加水印
   使用元素和uni-app提供的绘图API来为图片或视频添加水印。首先，在页面模板中添加元素，然后在方法中编写绘制水印的逻辑。

<!-- 在template标签内 -->
<canvas canvas-id="watermarkCanvas" style="width: 100%; height: 100%;"></canvas>

// 在methods对象中
methods: {
  // ... 其他方法 ...
  addWatermark(filePath) {
    const ctx = uni.createCanvasContext('watermarkCanvas');
    // 加载原图到画布
    uni.imageLoader.load({
      src: filePath,
      success: res => {
        ctx.drawImage(res.path, 0, 0, res.width, res.height);
        // 在此处绘制你的水印，例如：
        ctx.setFontSize(20);
        ctx.setTextAlign('center');
        ctx.setFillStyle('rgba(255, 255, 255, 0.7)'); // 设置水印颜色和透明度
        ctx.fillText('Your Watermark Text', res.width / 2, res.height - 10); // 设置水印文本和位置
        // 保存带有水印的图片或视频
        uni.canvasToTempFilePath({
          canvasId: 'watermarkCanvas',
          success: res => {
            // 使用res.tempFilePath作为带有水印的图片或视频路径
          }
        });
      }
    });
  }
}

总结

通过以上步骤，你可以在uni-app项目中实现实时拍照和录像功能，并在生成的媒体文件上添加自定义水印。记得在实际部署前进行充分的测试，以确保用户体验流畅，且水印显示正确。希望本篇博客能够帮助你掌握这一技能！