微信小程序使用相机组件如何实现
2018-07-27|HiShop
导读:许多小程序都会用到相机,那么相机组件是如何实现的,下面为大家介绍这篇文章。...
许多小程序都会用到相机,那么相机组件是如何实现的,下面为大家介绍这篇文章。
微信小程序使用相机组件如何实现
- <view class="page-body">
- <view class="page-body-wrapper">
- <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
- <view class="btn-area">
- <button type="primary" bindtap="takePhoto">拍照</button>
- </view>
- <view class="btn-area">
- <button type="primary" bindtap="startRecord">开始录像</button>
- </view>
- <view class="btn-area">
- <button type="primary" bindtap="stopRecord">结束录像</button>
- </view>
- <view class="preview-tips">预览</view>
- <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
- <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
- </view>
- </view>
- onLoad() {
- this.ctx = wx.createCameraContext()
- },
- takePhoto() {
- this.ctx.takePhoto({
- quality: 'high',
- success: (res) => {
- this.setData({
- src: res.tempImagePath
- })
- }
- })
- },
- startRecord() {
- this.ctx.startRecord({
- success: (res) => {
- console.log('startRecord')
- }
- })
- },
- stopRecord() {
- this.ctx.stopRecord({
- success: (res) => {
- this.setData({
- src: res.tempThumbPath,
- videoSrc: res.tempVideoPath
- })
- }
- })
- },
- error(e) {
- console.log(e.detail)
- }
- /* pages/one/one.wxss */
- .preview-tips {
- margin: 20rpx 0;
- }
- .video {
- margin: 50px auto;
- width: 100%;
- height: 300px;
- }
Hishop小程序工具开发公司长沙海商,是一家有着十年技术前沿的公司,我们以先进技术提供并解决各行业小程序开发,操作简单,支持多种社群营销活动,以及可视化模板操作,大大减少人力物力成本。
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店