微信小程序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%;
}