回答

我们使用camera组件，上面覆盖文本和拍照按钮，文本显示当前的位置与时间，具体代码如下：

wxml

<view class="container">
  <camera device-position="back" flash="off" class="camera"></camera>
  <view class="watermark">
    <text>{{address}}</text>
    <text>{{date}} {{time}}</text>
  </view>
  <button bindtap="takePhoto">拍照</button>
  <canvas type="2d" id="watermarkCanvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;"></canvas>
</view>

Page({
    data: {
      canvasWidth: 300,
      canvasHeight: 400,
      address: '安徽 ',
      date: '2015-12-12',
      time: '11：11：21'
    },
  
    onLoad: function() {
      this.updateLocationAndTime();
    },
  
    updateLocationAndTime: function() {
      const that = this;
      wx.getLocation({
        type: 'gcj02', // 使用国测局坐标系
        success: function(res) {
          const latitude = res.latitude;
          const longitude = res.longitude;
          wx.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1/',
            data: {
              location: `${latitude},${longitude}`,
              key: '你的腾讯地图API密钥' // 请替换为您的实际API密钥
            },
            success: function(addressRes) {
              if (addressRes.data.status === 0) {
                const address = addressRes.data.result.address;
                const now = new Date();
                const date = now.toLocaleDateString();
                const time = now.toLocaleTimeString();
                that.setData({
                  address: address,
                  date: date,
                  time: time
                });
              } else {
                console.error('获取地址失败:', addressRes.data.message);
                wx.showToast({
                  title: '获取地址失败',
                  icon: 'none'
                });
              }
            },
            fail: function(error) {
              console.error('请求失败:', error);
              wx.showToast({
                title: '网络请求失败',
                icon: 'none'
              });
            }
          });
        },
        fail: function(error) {
          console.error('获取位置失败:', error);
          wx.showToast({
            title: '获取位置失败',
            icon: 'none'
          });
        }
      });
    },
  
    takePhoto: function() {
      const ctx = wx.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.addWatermark(res.tempImagePath);
        },
        fail: (error) => {
          console.error('拍照失败:', error);
          wx.showToast({
            title: '拍照失败',
            icon: 'none'
          });
        }
      });
    },
    addWatermark: function(tempImagePath) {
        const that = this;
        const query = wx.createSelectorQuery();
        query.select('#watermarkCanvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            
            // 设置canvas的实际大小
            canvas.width = that.data.canvasWidth;
            canvas.height = that.data.canvasHeight;
    
            const img = canvas.createImage();
            img.onload = () => {
              // 清空canvas
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              
              // 绘制图片
              ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
              
              // 添加水印，位置和字体大小自定义
              ctx.font = '12px sans-serif';
              ctx.fillStyle = 'white';
              ctx.fillText(that.data.address, 10, 20);
              ctx.fillText(that.data.date + ' ' + that.data.time, 10, 40);
              
              // 将canvas内容保存为图片
              wx.canvasToTempFilePath({
                canvas: canvas,
                success: function(res) {
                  wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function() {
                      wx.showToast({
                        title: '保存成功',
                      });
                    },
                    fail: function(error) {
                      console.error('保存失败:', error);
                      wx.showToast({
                        title: '保存失败',
                        icon: 'none'
                      });
                    }
                  });
                },
                fail: function(error) {
                  console.error('生成图片失败:', error);
                  wx.showToast({
                    title: '生成图片失败',
                    icon: 'none'
                  });
                }
              });
            };
            
            img.onerror = (err) => {
              console.error('图片加载失败:', err);
              wx.showToast({
                title: '图片加载失败',
                icon: 'none'
              });
            };
            
            img.src = tempImagePath;  // 设置图片源
          });
      }
  });

.container {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  
  .camera {
    width: 100%;
    height: 100%;
  }
  
  .watermark {
    position: absolute;
    bottom: 210px;
    left: 10px;
    color: white;
    font-size: 12px;
  }
  
  button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }