一招在uni-app中实现水印相机功能，燃爆小程序端体验！

2022-11-15 15:44:58

利用 uni-app 打造自定义水印相机，助力业务发展

在小程序生态风起云涌的今天，uni-app 作为一款跨平台应用开发框架，凭借其一站式开发、多端运行的优势，受到了众多开发者的青睐。在众多的应用场景中，相机功能举足轻重，如何巧妙利用 uni-app 官方 API 实现自定义水印相机的需求，相信是不少开发者关心的话题。本文将深入浅出地讲解这一过程，为您的业务开发提供强有力的解决方案。

水印相机的意义

水印相机作为一种实用组件，在诸多场景中发挥着不可替代的作用。它可以帮助我们在拍摄照片或录制视频时自动添加水印信息，有效保护知识产权或提升品牌曝光度。

在小程序端，水印相机功能更是不可或缺。一方面，它可以帮助我们实现证件照拍摄、证件照制作等功能；另一方面，它还可以帮助我们在营销活动中快速生成带水印的宣传海报，吸引更多用户关注。

uni-app 实现水印相机功能

1. 准备工作

在开始实现之前，我们需要做好以下准备：

搭建 uni-app 开发环境
准备水印图片或文字
定义文字水印样式（如字体、颜色、大小等）

2. 实现步骤

在 pages.json 文件中添加页面路径：

{
  "pages": [
    {
      "path": "pages/index/index",
      "component": "./index"
    },
    {
      "path": "pages/camera/camera",
      "component": "./camera"
    }
  ]
}

在 pages/camera/camera.vue 文件中编写代码：

<template>
  <view>
    <camera id="camera" @ready="onReady" mode="aspectFill"></camera>
    <view class="watermark" v-if="watermark">
      {{ watermark }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      watermark: null
    }
  },
  methods: {
    onReady(e) {
      this.camera = e.detail.camera
      this.watermark = this.$util.createWatermark()
    }
  }
}
</script>

<style>
.watermark {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
}
</style>

在 utils/util.js 文件中编写创建水印的函数：

export default {
  createWatermark() {
    const context = uni.createCanvasContext('watermark-canvas')
    context.setFillStyle('rgba(0, 0, 0, 0.5)')
    context.fillRect(0, 0, 300, 100)
    context.setFillStyle('#fff')
    context.setFontSize(16)
    context.fillText('我是水印', 10, 20)
    return context.canvasToTempFilePathSync({
      x: 0,
      y: 0,
      width: 300,
      height: 100,
      destWidth: 300,
      destHeight: 100
    })
  }
}

在 main.js 文件中挂载 $util 对象：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.prototype.$util = require('./utils/util')

new Vue({
  render: h => h(App)
}).$mount('#app')

3. 效果演示

运行项目后，点击页面上的“打开相机”按钮，即可打开相机界面。此时，您会发现相机界面中已经添加了水印信息。您可以点击“拍照”按钮拍摄照片，照片中也会包含水印信息。

常见问题解答

如何自定义水印内容？

您可以在 createWatermark() 函数中修改水印内容，例如：context.fillText('自定义水印', 10, 20)。
如何修改水印样式？

您可以在 .watermark 样式中修改水印样式，例如：修改背景颜色、字体大小或位置。
如何获取带有水印的照片路径？

在相机事件中，您可以通过 e.detail.tempFilePath 获取照片路径。
水印相机是否支持录制视频？

目前 uni-app 官方 API 暂不支持在录制视频时添加水印。
如何提升水印相机的性能？

您可以使用 canvas.toTempFilePathSync() 的 quality 参数来降低水印图片的质量，从而提升性能。