微信小程序> 微信小程序自定义拍照页面开发

微信小程序自定义拍照页面开发

浏览量:677 时间: 来源:屋顶上的轻骑兵hhh


实现效果:

用到的组件:camera,cover-image,cover-view

解决思路:在官方文档搜索camera组件,注意到cover-view介绍里有一句“可覆盖的原生组件包括mapvideocanvascameralive-playerlive-pusher,只支持嵌套cover-viewcover-image”。

结合了两个组件,自己PS了一张有框框的png图片放
到cover-image里,大功告成。

!--pages/camera.wxml--camera mode="normal" device-position="back" flash="auto" binderror="error" style="width: 100%; height: 250px;"  cover-view class="controls"      cover-image class="img" src="../../images/notice.png" style="width:100%; height:100%"/  /cover-view  cover-view class="noticeTXT"请将XXX放入框内/cover-view/camerabutton type="primary" bindtap="takePhoto"拍照/buttonimage mode="widthFix" src="{{src}}"/image
/* pages/camera.wxss */.controls {  position: relative;  top: 5%;  display: flex;}.noticeTXT{  font-size: 10PX;  color: rgb(12, 242, 240);  text-align: center}

// camera.jsPage({  onReady() {   },  takePhoto() {    const ctx = wx.createCameraContext()    ctx.takePhoto({      quality: 'high',      success: (res) = {        this.setData({          src: res.tempImagePath        })      }    })  },  error(e) {    console.log(e.detail)  }})




版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎