uniapp 仿钉钉打卡-拍照篇

<view style="position: relative;">
        <canvas canvas-id="myCanvas" :style="style"></canvas>
</view>

canvas 的样式需要设置宽高，这个区域就是绘制的画图区域，也就是说，照片的大小不能超过画图区域，这就必须保证canvas要跟图片大小一样

export default {
    data() {
        return {
            style: 'position:absolute;top:-9999px;left:-9999px;' //实际需求中不展示绘图区
        }
    }
}

接下来就是拍照

getImage() {
        let that = this
        uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['camera'],
                success: function (res) {
                        let tempFilePath = res.tempFilePaths[0] //拍照后的图片临时路径（涉及隐私被加密了）
                        uni.getImageInfo({
                                src: tempFilePath,
                                success: function (info) {// 格式化为 'YYYYMMDDHHmmss' 格式
                                        const oriWidth = info.width
                                        const oriHeight = info.height
                                        that.drawImg(tempFilePath, oriWidth, oriHeight)
                                },
                                fail: function(err) {
                                        console.error(err)
                                }
                        })
                },
                fail: function(err) {
                        console.error(err)
                }
        })
},
drawImg(src, width, height) {
        let canvas = uni.createCanvasContext('myCanvas')
        this.style = 'width:'+ width + 'px;height:' + height + 'px;position:absolute;top:-9999px;left:-9999px;'
        canvas.drawImage(src, 0, 0, width, height, 0, 0, canvas.width, canvas.height)
        let that = this
        // 设置水印样式
        let fontSize = 12
        let fontColor = '#ffffff'
        let x = 0  //根据需要自行调整
        let y = 0  //根据需要自行调整
        // 获取当前日期和时间
        const now = new Date()
        const curTime= now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0') + '.' + now.getDate().toString().padStart(2, '0')
        const curtime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0')
        
        canvas.setFillStyle(fontColor)
        canvas.setFontSize(fontSize)
        canvas.fillText(curTime+ " " + curtime, x, y)

        // 将canvas内容保存为图片
        canvas.draw(true, () => {
                uni.canvasToTempFilePath({
                        canvasId: 'myCanvas',
                        success: function (res) {
                                let savedFilePath = res.tempFilePath
                                that.saveToLocal(savedFilePath) // 如果是上传到服务器就根据项目本身走文件上传逻辑，这里用的是保存到本地
                        },
                        fail: function (e) {
                                // 保存失败处理
                                console.error("canvas图片保存失败！", e)
                        }
                })
        })
},
saveToLocal(filePath) {
  uni.saveImageToPhotosAlbum({
    filePath: filePath,
    success: function () {
      uni.showToast({
        title: '图片已保存到相册',
        icon: 'success',
        duration: 2000,
      });
    },
    fail: function () {
      uni.showModal({
        title: '提示',
        content: '保存图片到相册失败，请检查权限设置',
        showCancel: false,
      });
    },
  });
}