微信小程序水印相机代码

以下是一个简单的微信小程序水印相机代码示例。首先需要在 `app.json` 文件中添加相机和保存图片权限：

{
  "permission": {
    "scope.userLocation": {
      "desc": "获取位置信息"
    },
    "scope.camera": {
      "desc": "获取相机权限用于拍照"
    },
    "scope.writePhotosAlbum": {
      "desc": "获取保存图片到相册的权限"
    }
  }
}

然后在 `index.wxml` 文件中添加页面布局：

<view class="camera-container">
  <camera mode="normal" flash="off" device-position="{{cameraPosition}}" binderror="onCameraError" bindstop="onCameraStop" bindscancode="onScanCode"></camera>
  <view class="watermark-container">
    <image src="{{watermarkImg}}" mode="aspectFill"></image>
    <text class="watermark-text">{{watermarkText}}</text>
  </view>
  <view class="camera-controls">
    <button class="camera-switch" bindtap="switchCamera">
      <image src="{{cameraPosition === 'front' ? '/images/camera-rear.png' : '/images/camera-front.png'}}"></image>
    </button>
    <button class="camera-capture" bindtap="capturePhoto">
      <image src="/images/camera-shutter.png"></image>
    </button>
  </view>
</view>

在 `index.js` 文件中，处理相机和水印相关逻辑：

Page({
  data: {
    cameraPosition: 'back',
    watermarkImg: '',
    watermarkText: 'Demo'
  },
  onLoad: function () {
    // 加载水印图片
    this.setData({
      watermarkImg: '/images/watermark.png'
    })
  },
  onCameraError: function (e) {
    console.log('Camera error:', e.detail)
  },
  onCameraStop: function () {
    console.log('Camera stopped')
  },
  onScanCode: function (e) {
    console.log('Scanned code:', e.detail.result)
  },
  switchCamera: function () {
    this.setData({
      cameraPosition: this.data.cameraPosition === 'back' ? 'front' : 'back'
    })
  },
  capturePhoto: function () {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        // 保存图片
        wx.saveImageToPhotosAlbum({
          filePath: res.tempImagePath,
          success: (res) => {
            console.log('Image saved:', res)
            wx.showToast({
              title: 'Image saved',
              icon: 'success'
            })
          },
          fail: (err) => {
            console.error('Failed to save image:', err)
            wx.showToast({
              title: 'Failed to save image',
              icon: 'none'
            })
          }
        })
      },
      fail: (err) => {
        console.error('Failed to capture photo:', err)
        wx.showToast({
          title: 'Failed to capture photo',
          icon: 'none'
        })
      }
    })
  }
})

在 `index.wxss` 文件中添加样式：

.camera-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.watermark-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.watermark-container image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.watermark-container .watermark-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camera-controls {
  position: absolute;
  bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.camera-controls button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.camera-controls button img {
  width: 50%;
  height: 50%;
}

这只是一个简单的示例，如果需要添加更多功能，可以自行扩展。