小程序摄像头使用技巧

小程序社区版主 x837195936(熊晨沣):做了一个小demo,小程序调用摄像头拍照。拍照时可以选相框,也可以在相机上添加别的饰品、表情等覆盖物。主要是cover-view,cover-image结合camera组件的应用。

index.wxml <view class="container"> <camera device-position='{{devicePosition}}' hidden='{{hideCamara}}' style="width: 100%;height: {{hh}}px;"> <cover-image bindtap='takePhoto' class='ground' src='{{ground}}' mode='aspectFill'></cover-image> <cover-view class='tips' style='opacity: {{tips}};'>点击屏幕任意处拍照</cover-view> <cover-view class='change' bindtap='change'> <cover-image src='../../images/change.png'></cover-image> </cover-view> </camera> <image src='{{photo}}' style='width: 100%;' mode='widthFix'></image> <button class='retoken' bindtap='retoken'>重拍</button> </view>

index.wxss .tips { position: fixed; left: 50%; top: 50%; z-index: +999; color: #fff; font-size: 24rpx; transition: 1s; transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); } .retoken { width: 280rpx; height: 48rpx; color: #fff; position: fixed; bottom: 40rpx; font-size: 24rpx; line-height: 48rpx; left: 50%; padding: 0; margin: 0; background: #0082df; border-radius: 48rpx; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); } .change { width: 72rpx; height: 72rpx; position: fixed; right: 40px; bottom: 40rpx; border-radius: 50%; background: #fff; } .change cover-image { width: 40rpx; height: 40rpx; margin: 16rpx; }

index.js

//index.js

//获取应用实例

const app = getApp()

const ww = app.globalData.ww;

const hh = app.globalData.hh;

Page({

data: {

ww: ww,

hh: hh,

tips: 0,

hideCamara: false,

devicePosition: 'back',

photo: '',

ground: '../../images/ground.png'

},

onLoad() {

this.ctx = wx.createCameraContext();

this.showTips();

},

takePhoto() {

this.ctx.takePhoto({

quality: 'high',

success: (res) => {

this.setData({

photo: res.tempImagePath,

hideCamara: true

});

}

})

},

retoken() {

this.setData({

photo: 0,

hideCamara: false

})

},

change() {

if (this.data.devicePosition == 'back') {

this.setData({

devicePosition: 'front'

})

} else {

this.setData({

devicePosition: 'back'

})

}

},

showTips() {

this.setData({

tips: 1

});

setTimeout(() => {

this.setData({

tips: 0

});

}, 3000);

}

})

app.js

App({

onLaunch: function () {

this.getSize();

},

getSize() {

var that = this;

wx.getSystemInfo({

success: function (res) {

that.globalData.ww = res.windowWidth;

that.globalData.hh = res.windowHeight;

}

})

},

globalData: {

userInfo: null

}

})

效果图

跳坑

1、camare组件是顶级组件,想要在组件上覆盖其他元素需要在<camare>XXXXXX</carame>内部使用cover-view,cover-image才可以。

2、隐藏camera组件需要在camera组件上绑定属性 hidden="{{hideCamera}}" 使用hideCamera属性来控制组件的隐藏显示,其余的opacity,display等都无效。

极乐技术社区

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2018-04-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

5956
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3203
来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

982
来自专栏十月梦想

元素居中的多种实现方式!

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

672
来自专栏前端小叙

css绝对定位如何在不同分辨率下的电脑正常显示定位位置?

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用。 首先要明白如下几...

4347
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(一)

在我们的开发生活中,相信很多人都会遇到形形色色的项目需求,比如更改浏览器的默认样式,在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式,或者当你...

3595
来自专栏Micro_awake web

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: ...

3666
来自专栏前端知识分享

第212天:15种CSS居中的方式,最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

911
来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

1092
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

1023

扫码关注云+社区

领取腾讯云代金券