微信小程序轮子 - 调起摄像头拍摄照片并获取照片路径（可用于拍摄身份证 / 人像等等）

╰+哭是因爲堅強的太久メ 2022-11-27 09:00 447阅读 0赞

## 效果图 ##

> 如果你需要现成的轮子，可以看看这个：[调起摄像头拍照并在页面预览（身份证拍照 / 人像拍照等等）][Link 1]

`蓝色线框` / `橘黄色文字` 都可以自定义或者去掉，能点击拍照与重新拍照，最后获取图像路径。

![在这里插入图片描述][2020081418533991.gif_pic_center]

## wxml ##

<view class="camera_box">
      <camera class="camera" wx:if="{ {!show}}" device-position="back" flash="off" binderror="error">
        <cover-view class="id_m">
          <cover-image class="img" src="https://img-blog.csdnimg.cn/20200814183517400.png"></cover-image>
          <cover-view class="tips_txt">请将头像面放到框内，并调整好光线</cover-view>
        </cover-view>
      </camera>
      <image class="camera_img" src="{ {src}}" wx:if="{ {show}}"></image>
      <view class="action">
        <button class="takeBtn" type="primary" bindtap="takePhoto" wx:if="{ {!show}}"></button>
        <button class="saveImg" type="primary" bindtap="saveImg" wx:if="{ {show}}"></button>
        <button class="cancelBtn" wx:if="{ {show}}" type="primary" bindtap="cancelBtn"></button>
      </view>
    </view>

## wxss ##

.camera_box { 
      height: 100vh; width: 100vw;
      position: relative;
    }
    .camera { 
      height: 85vh; width: 100vw;
      z-index: 1;
    }
    .id_m { 
      height: 85vh; width: 100vw;
      z-index: 999;
      background: rgba(0, 0, 0, 0.1);
      display: flex;
      position: absolute;
    }
    .id_m .img { 
      width: 550rpx;
      height: 900rpx;
      display: block;
      position: absolute;
      left: 0; right: 0; margin: auto auto;
      top: 0; bottom: 0;
    }
    .id_m .tips_txt { 
      transform:rotate(90deg);
    }
    .camera_box .action { 
      height: 15vh;
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
    } 
    .camera_box .takeBtn { 
      height: 120rpx; width: 120rpx; border-radius: 50%;
      font-size: 24rpx;
      background: url('https://cdn.ctoku.com/1123123123123e3241.png') no-repeat center;
      background-size: contain;
      border: none;
    }
    .camera_box .cancelBtn { 
      font-size: 24rpx;
      height: 120rpx; width: 120rpx; border-radius: 50%;
      background: url('https://cdn.ctoku.com/12311123342312231.png') no-repeat center;
      background-size: contain;
      border: none;
    }
    .camera_box .saveImg { 
      background: url('https://cdn.ctoku.com/1232123434231231231.png') no-repeat center;
      font-size: 24rpx;
      height: 120rpx; width: 120rpx; border-radius: 50%;
      background-size: contain;
      border: none;
    }
    .camera_box .takeBtn::after { 
      border: none;
    }
    
    .camera_img { 
      height: 85vh; width: 100%;
    }
    .id_m .tips_txt { 
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%) rotate(90deg);
    	width: 542rpx;
    	height: 35rpx;
    	font-size: 34rpx;
    	color: #EA952F;
    	font-weight: 500;
    }

## js ##

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
    
        src: '',//图片路径
        show: false,//标识
    
      },
    
      // 重新拍照(取消)
      cancelBtn () { 
        this.setData({ show: false})
      },
    
      // 完成拍照(保存)
      saveImg () { 
    
        wx.showModal({ 
          title: '图片地址',
          content: this.data.src,
        })
    
      },
    
      // 拍摄功能函数
      takePhoto() { 
    
        // 创建CameraContext对象
        const ctx = wx.createCameraContext()
    
        // 监听
        const listener = ctx.onCameraFrame((frame) => { 
          console.log(frame)
        })
    
        // 拍照实时帧
        ctx.takePhoto({ 
    
          quality: 'high',//成像质量(高)
          
          // 成功回调
          success: (res) => { 
    
            this.setData({ //更新数据
              src: res.tempImagePath,//图像路径
              show: true
            })
    
            // 停止监听实时帧
            listener.stop({ 
    
              success: (res) => { //成功回调
                //...
              },
    
              fail: (err) =>{ //失败回调(错误)
                wx.showToast({ 
                  title: '监听实时帧失败，请退出重试！'
                })
              }
            })
          },
    
          // 错误处理(接口调用失败)
          fail: (err) => { 
            wx.showToast({ 
              title: '失败，请退出重试！'
            })
          }
        })
      },
    
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
        
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
        
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
        
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
        
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
        
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
        
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
        
      }
    })

## 注意 ##

获取到的路径是 `API` 返回的 **临时路径** ，需要根据需求做处理后上传到后端。

[Link 1]: https://wangjiabin.blog.csdn.net/article/details/108038444
[2020081418533991.gif_pic_center]: /images/20221124/3bbbff44319748bcab160683f311f380.png