相机拍照界面,因为只识别一个号码所以拍照区域不需要很大,如果单纯的把相机缩小又感觉很丑的样子。所以有点类似微信扫描那样的,需要的部分全亮其他部分半透明的效果。
如下图所示
一开始一直在想小程序的相机是否提供类似的功能,让我通过设置甚直接达到这样的效果。但是很可惜没找到,相机上面加文字图片都是可以的。其实这个一部分透明一般分半透明就是一个图片。整个背景是个图片,这也是自己想好了好久才想到的,然后自己通过PS把一张图做成透明和半透明的效果。
代码如下:
1 <camera device - position="width" flash="off" style="height:{{height}}px;"> 2 <cover-view class='camerabgImage-view'> 3 <cover-image class='bgImage' src='../images/bg2.png'> </cover-image> 4 <cover-view class='cameraTips'>请对准电话号码扫描</cover-view> 5 <cover-view class="cameraTips2">*支持打印和手写号码识别</cover-view> 6 <cover-view class="cameraBgView"> 7 <cover-image class='cancelphoto' src='../images/cancelPhoto2.png' bindtap='cancelPhoto'></cover-image> 8 <cover-view class='cameraButton-view'> 9 <cover-image class='takephoto' src='../images/takephoto.png' bindtap='takePhoto'></cover-image> 10 </cover-view> 11 </cover-view> 12 </cover-view> 13 </camera>