钉钉小程序拍照加水印保存本地教程

钉钉小程序拍照并加水印保存本地教程

钉钉小程序可以通过调用相机组件来实现拍照功能，同时使用canvas组件和微信小程序提供的api来实现给照片加水印并保存本地的功能。具体步骤如下：

在wxml文件中添加相机组件和canvas组件。

<camera id='camera' mode='normal' device-position='{{cameraPosition}}' bindstop='onCameraStop'></camera>
<canvas canvas-id='canvas' style='display:none;'></canvas>

在js文件中获取相机组件和canvas组件，并监听拍照事件。

Page({
  data: {
    cameraPosition: 'back'
  },
  onCameraStop(e) {
    // 监听拍照事件，将照片转化为base64格式
    const { tempImagePath } = e.detail;
    wx.getFileSystemManager().readFile({
      filePath: tempImagePath,
      encoding: 'base64',
      success: (res) => {
        const base64Data = `data:image/jpeg;base64,${res.data}`;
        // 将拍照的照片传入canvas组件
        const ctx = wx.createCanvasContext('canvas');
        ctx.drawImage(base64Data, 0, 0, 300, 400);
        // 给照片添加水印
        ctx.setFontSize(20);
        ctx.setFillStyle('#fff');
        ctx.fillText('这是一个水印', 10, 30);
        ctx.draw(false, () => {
          // 将加水印后的照片保存到本地
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 300,
            height: 400,
            canvasId: 'canvas',
            success: (res) => {
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                    duration: 2000
                  })
                },
                fail: () => {
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none',
                    duration: 2000
                  })
                }
              })
            }
          })
        });
      }
    })
  }
})

在小程序的json文件中添加权限配置，以便用户授权保存照片到相册。

{
  'permission': {
    'scope.userLocation': {
      'desc': '你的位置信息将用于小程序获取你的位置'
    },
    'scope.writePhotosAlbum': {
      'desc': '你的相册将用于保存照片'
    }
  }
}

通过以上三个步骤，我们就可以在钉钉小程序中实现拍照并加水印保存本地的功能了。