微信小程序如何使用拍照？

最新推荐文章于 2025-02-08 13:29:06 发布

眼睛微微笑

最新推荐文章于 2025-02-08 13:29:06 发布

阅读量3.2k

点赞数

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/Angely_cc/article/details/94294517

版权

小程序专栏收录该内容

32 篇文章

订阅专栏

在这里插入图片描述

<camera mode="normal" device-position="{{choose}}" flash="auto" binderror="error" style="width: 100%; height: 450px;overflow: hidden;">
  <cover-view class="controls">
      <cover-image class="img" src="http://imgcache.qq.com/open_proj/proj_qcloud_v2/wx/bg-face.png" style="width:100%; height:120%"/>
  </cover-view>
  <cover-view class="noticeTXT">
		<!-- 步骤提示 -->
		<cover-view class="num">这是提示</cover-view>
	</cover-view>
</camera>
<button bindtap='change'>切换前后摄像头</button>
<button type="primary" bindtap="takePhoto">拍照</button>

<image mode="widthFix" src="{{src}}"></image>

/* pages/pai/pai.wxss */
camera {
  position: relative;
}
.controls {
  position: relative;
  /* top: 5%; */
  display: flex;
}
.noticeTXT{
  font-size: 10PX;
  color: rgb(12, 242, 240);
  text-align: center;
  position: absolute;
  top: 30rpx;
  left: 50%;
  transform: translateX(-50%);
}
.controls {
  width:100%;
  height: 100%;
}
.img {
  width: 100%;
  height: 100% !important;
}

Page({
  data(){
    choose:'front'
  },
  onReady() {

  },
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e)
  },
  change(){
    if(this.data.choose=='front'){
        this.setData({
            choose:'back'
        })
    } else {
      this.setData({
        choose:'front'
      })
    }
  }

})