小程序之自定义拍照

最新推荐文章于 2024-04-24 16:56:44 发布

胖蛋蛋

最新推荐文章于 2024-04-24 16:56:44 发布

阅读量762

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_37805723/article/details/103388163

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

小程序之自定义拍照

首先预览一下效果图，是否是大家想要的效果图
实现功能主要用了哪些内容

camera：系统相机
 cover-view：覆盖在原生组件之上的文本视图。

视图代码

wxml

<view class="waper flex-align-center">
  <view class="noticeTXT">请将身份证正面放入框内</view>
  <camera mode="normal" device-position="back" flash="auto" binderror="error" style="width: 90%; height: 250px;">
    <cover-view class="controls">
        <cover-image class="img" src="/images/border.png" style="width:100%; height:250px;"/>
    </cover-view>
  </camera>
</view>
<view class="takePhoto btn bg-brown" bindtap="takePhoto">拍照</view>

wxss

waper{
    width: 100%;
    height: 60vh;
    align-items: center;
    flex-direction: column;
}
.controls {
    position: relative;
    top: 0;
    display: flex;
}

.noticeTXT {
    text-align: center;
    margin-bottom: 100rpx;
}

.takePhoto{
    width: 90%;
    margin: 0 auto
}

.flex-align-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.btn {
  border-radius: 90rpx;
  padding: 15rpx 25rpx;
  text-align: center;
}

.bg-brown {
  color: #fff;
  background: linear-gradient(153deg, rgba(225, 164, 70, 1) 0%, rgba(195, 144, 65, 1) 100%);
}

js

Page({
  data:{
    img:''
  },
  //拍照
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
      	//res.tempImagePath为拍取的相片
      	console.log('相片路径',res.tempImagePath)
      	this.setData({img:res.tempImagePath})
      }
    })
  }
})