1、页面路径 "pages/camera/takePhoto"

2、样式：takePhoto.wxss

.fullscreen{width: 100%; height: 100%;
}
.icon-take{width: 150rpx;height: 150rpx;position: absolute;z-index: 99;bottom: 50rpx;left: 300rpx;
}
.icon-change{width: 65rpx;height: 55rpx;position: absolute;z-index: 99;bottom: 80rpx;right: 80rpx;
}
.take-tip{color: white;position: absolute;width: 250rpx;z-index: 99;bottom: 250rpx;text-align: center;left: 250rpx;
}.cancel{color: white;position: absolute;z-index: 99;bottom: 80rpx;left: 80rpx;
}
.sure{color: white;position: absolute;z-index: 99;bottom: 80rpx;right: 80rpx;
}

2、布局：takePhoto.wxml

<block wx:if="{{showPreView}}"><image  class="fullscreen" src="{{imagePath}}"></image><cover-view class="cancel" bindtap="retake">重拍</cover-view><cover-view class="sure" bindtap="makeUse">使用照片</cover-view>
</block>
<block wx:else><camera device-position="{{isBackCamera?'back':'front'}}" flash="off" binderror="error" class="fullscreen" ><cover-view class="cancel" bindtap="cancel">取消</cover-view><cover-view class="take-tip">轻触拍照</cover-view><cover-image class="icon-take" src="/images/icon_shoot.png" bindtap="takePhoto"></cover-image><cover-image class="icon-change" src="/images/icon_change.png" bindtap="changeCamera"></cover-image></camera>
</block>

3、javaScript：takePhoto.js

// pages/camera/takePhoto.js
const devicePositions = ['back','front']
var eventChannelPage({/*** 页面的初始数据*/data: {isBackCamera:true,imagePath: '',//拍照路径showPreView: false //显示图片预览},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {eventChannel = this.getOpenerEventChannel()this.ctx = wx.createCameraContext()},error(e) {console.log(e.detail)},/*** 生命周期函数--监听页面显示*/onShow: function () {wx.setKeepScreenOn({keepScreenOn: true,})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {wx.setKeepScreenOn({keepScreenOn: false,})},takePhoto() {if (this.data.showPreView) {wx.showToast({title: '已拍过，请重拍',})return}console.log('开始拍照。。。')this.ctx.takePhoto({quality: 'high',success: (res) => {this.setData({imagePath: res.tempImagePath,showPreView: true})wx.getImageInfo({src: res.tempImagePath,success:(res)=>{console.log("图片信息",res)}})console.log(res.tempImagePath)}})},retake() {this.setData({showPreView: false,imagePath: null})},changeCamera(){let cameraPos = this.data.isBackCamerathis.setData({isBackCamera:!cameraPos})},/*** 取消*/cancel(){wx.navigateBack({delta: 1,})},//使用照片makeUse(){this.emitPhoto(this.data.imagePath)wx.navigateBack({delta: 1,})},emitPhoto(path){eventChannel.emit('photoCallback',{path:path})}
})

4、配置：takePhoto.json

{"usingComponents": {},"navigationStyle":"custom"
}

5、使用

//拍照
takePicture() {let _this = thiswx.navigateTo({url: '/pages/camera/takePhoto',events:{photoCallback:function(data){console.log(data)//data.path  即为所拍照片的临时文件}}})
}

初学小程序，请多多指教
用到的拍照按钮、切换摄像头按钮可自己添加相应图片

微信小程序自定义拍照功能相关推荐

微信小程序的拍照功能
作者:刘旭濠撰写时间:2019年04月14日一开始就想弄个微信的小程序玩玩然后想了想最后就决定了,就弄个微信小程序的拍照功能,然后就上网查询了一些资料,在微信社区文档里有很多功能可以使用,然后我就 ...
微信小程序实现拍照功能
小程序实现一个拍照功能,亲测可用. 页面的样式都是我自己写的,当然你们也可以自己排版写样式.下面一共有三个按钮,返回按钮.拍照按钮.切换摄像头按钮. 首先相机页面是通过wx:if来让其隐藏的,通过点击 ...
微信小程序自定义分享功能开发笔记
要在分享的页面中定义onShareAppMessage 方法,只有定义了此事件处理函数,右上角菜单才会显示"转发"按钮 onShareAppMessage触发方式有两种,一种是通过 ...
微信小程序开发（2） - 微信小程序实现拍照和录像拍摄功能方法
微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法.分享给大家供大家参考,具体如下: 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组 ...
uniapp微信小程序自定义相机，给相机添加辅助框，解决拒绝相机默认授权后无法再次拉起相机授权问题
微信小程序自定义相机效果文章目录微信小程序自定义相机效果需求一.小程序自定义相机 1.使用uniapp的camera组件二.使用cover-view,cover-image加辅助边框三 ...
uni开发微信小程序自定义相机自动检测(人像+身份证)
之前开发过微信小程序自定义相机拍照检测人像和身份证检测.一直期望写篇文章记录一下,趁现在有点时间,总结一下. 需求点: 1.能够自定拍摄人像 2.能够自动拍摄身份证正面照 3.识别身份证并且和人脸照比 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
小程序“自定义关键词”功能的常见问答
我们知道小程序可以通过线下扫码.公众号.好友分享.长按小程序码.搜索小程序名称来找到,现在又多了一个新方式--小程序后台新增自定义关键词功能:已发布小程序的开发者,可提交最多10个与小程序业务相关的关 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...

微信小程序自定义拍照功能

1、页面路径 "pages/camera/takePhoto"

2、样式：takePhoto.wxss

2、布局：takePhoto.wxml

3、javaScript：takePhoto.js

4、配置：takePhoto.json

5、使用

微信小程序自定义拍照功能相关推荐

最新文章

热门文章