微信小程序camera实例

微信小程序camera实例

效果展示

拍照界面

wxml

<camera mode="normal" device-position="front" flash="auto" class="camera">
    <cover-view class="coverText">photo</cover-view>
    <cover-image src="../image/outline.png" class="outline"></cover-image>
    <cover-image src="../image/button.png" class="button" bindtap="shoot"></cover-image>
</camera>
<!--mode为normal相机模式，scanCode扫码模式-->
<!--device-position摄像头朝向，front前置，back后置-->
<!--flash闪光灯，auto自动，on,off开关，torch常量-->

js

下面是js中的绑定事件

shoot:function(){
        const camera=wx.createCameraContext();
        camera.takePhoto({
            quality:"high",
            success:(res)=>{
                wx.setStorage({
                  data: res.tempImagePath,
                  key: 'people',
                })
                wx.redirectTo({
                  url: '/pages/test/photo',
                })
            }
        });
    },

wxss

page{
    width: 100%;
    height: 100%;
}
/*不配置page没有显示可能出问题*/
.camera{
    width: 100%;
    height: 100%;
}
.coverText{
    color: white;
    position: absolute;
    top: 5%;
    left: 45%;
}
.outline{
    width: 100%;
    height: 100%;
}
.button{
    width: 15%;
    height: 10%;
    position: absolute;
    top: 80%;
    left: 45%;
}

照片界面

wxml

<image class="img" src="{{photo}}"></image>

js

下面是js中data部分代码和onReady部分代码

data: {
        photo:""
},
onReady: function () {
    var target=this;
    /*必须要这一行*/ 
    wx.getStorage({
      key: 'people',
      success:function(res){
          target.setData({
              photo:res.data
          })
      },
    })
    /*打开界面，先读取缓存，赋值给photo（data中的），然后同步到wxml的photo，这样就呈现出来了*/ 
},

wxss

page{
    width: 100%;
    height: 100%;
}
/*也是不配置page显示可能出问题*/
.img{
    height: 100%;
    width: 100%;
}