微信小程序----水印相机

wxml部分

<!-- 水印相机 -->
<view style="width: 100vw;height: 100vh;">
    <!-- 相机 -->
    <camera mode="normal" resolution="high" style="width: 100%;height: 90%;">
        <canvas id="myCanvas" type="2d" style="width: 100%;height: 100%;"></canvas>
    </camera>
    <view class="btn">
        <!-- 拍摄按钮 -->
    <!-- <button bindtap="cameraPhoto">拍摄</button>
    <button type="warn" bindtap="cameraAgain">重拍</button>
    <button type="primary" bindtap="updatePhoto">上传</button> -->
     <button plain bindtap="cameraPhoto" disabled="{{shotBtnStatus}}">拍摄</button>
    <button type="warn" bindtap="cameraAgain" disabled="{{remakeBtnStatus}}">重拍</button>
    <button type="primary" bindtap="updatePhoto" disabled="{{btnStatus}}">上传</button>
    </view>
  
</view>

wxjs部分

// 拍摄照片
    cameraPhoto() {
        let cam = wx.createCameraContext();
        let that = this;
        cam.takePhoto({
            quality: 'high',
            success: (res) => {
                //console.log(res)
                this.setData({
                    src: res.tempImagePath
                })
                // 获取照片信息
                wx.getImageInfo({
                    src: res.tempImagePath,
                    success: (ress) => {
                        //创建canvas
                        wx.createSelectorQuery()
                            .select('#myCanvas') // 在 WXML 中填入的 id
                            .fields({
                                node: true,
                                size: true
                            })
                            .exec((res_canvas) => {

                                const {
                                    node
                                } = res_canvas[0];
                                if (!node) return;
                                let canvas = res_canvas[0].node;
                                const ctx = node.getContext('2d');

                                let dpr = wx.getSystemInfoSync().pixelRatio;

                                //新接口需显示设置画布宽高；
                                canvas.width = res_canvas[0].width * dpr
                                canvas.height = res_canvas[0].height * dpr

                                ctx.scale(dpr, dpr); //画布缩放比例
                                that.setData({
                                    canvas: canvas
                                });
                                //创建img
                                let img = that.data.canvas.createImage();
                                //图片加载完成后执行
                                img.onload = () => {
                                    //img.complete表示图片是否加载完成，结果返回true和false;
                                    //获取当前时间
                                    let newDate = new Date();
                                    let year = newDate.getFullYear() //年
                                    let month = newDate.getMonth() + 1 //月
                                    let day = newDate.getDate() //日
                                    var hour = newDate.getHours()
                                    var minute = newDate.getMinutes()
                                    var second = newDate.getSeconds()
                                    let roleNameInfo = '拍摄时间：' + year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second
                                    let address = this.data.address
                                    ctx.drawImage(img, 0, 0, res_canvas[0].width, res_canvas[0].height);
                                    //绘制时间
                                    ctx.fillStyle = ("white");
                                    ctx.font = '20px sans-serif';
                                    ctx.lineWidth = "20";
                                    ctx.fillText(roleNameInfo, 10, 575);
                                    //that.data.ctx_val
                                    //绘制地点
                                    ctx.fillStyle = ("white");
                                    ctx.font = '20px sans-serif';
                                    ctx.fillText(address, 10, 620);
                                    // 生成图片
                                    wx.canvasToTempFilePath({
                                        canvas,
                                        success: res => {
                                            //console.log('水印照片:', res)
                                            // 生成的图片临时文件路径
                                            const tempFilePath = res.tempFilePath
                                            that.setData({
                                                imgUrl: tempFilePath
                                            });
                                            //console.log(tempFilePath)

                                        },
                                    })
                                };
                                //绘制图片为拍照的临时地址
                                img.src = that.data.src;
                            })
                    }
                })
            }
        })
    },