评论

camera 组件代替choose image

camera 组件代替choose image

choose image 经常会闪退有没有!!!!!!

后来找到camera试了一下哈哈哈~~~~~~~

<view class='toast-boxhidden='{{hidecamera}}'>

  <!-- 相机组件 -->

  <camera device-position='backhidden='{{hidecamera}}model='normalflash='offstyle='z-index:10;height:{{windowHeight}}pxbinderror='error'>

  </camera>

      <!--拍摄按钮-->

      <cover-view class="tools"> 

    <cover-view hidden='{{hideTakeButton}}'style="position:absolute;bottom:7%;left:50px;color:white;font-size:50rpxbindtap='hidecamera'></cover-view>

    <cover-view class="takestyle="position:absolute;bottom:50rpx;left:{{(windowWidth-50)/2}}px;hidden='{{hideTakeButton}}bindtap='takePhoto'>

    </cover-view>

    <cover-view class="take1style="position:absolute;bottom:65rpx;left:{{(windowWidth-35)/2}}px;hidden='{{hideTakeButton}}bindtap='takePhoto'>

    </cover-view>

    <!--重拍按钮-->

    <cover-view class="donehidden='{{hideCoverButton}}'style="bottom:7%;left:50px;bindtap='takeAgain'></cover-view>

    <cover-view class="donehidden='{{hideCoverButton}}style="bottom:7%;left:{{windowWidth-80}}px;"  bindtap='done'></cover-view>

    <!--定格图片-->

    <cover-view style='width:{{windowWidth}}px;height:{{windowHeight}}px;position:absolute;z-index:-1hidden='{{hideCoverImage}}'>

      <cover-image  hidden='{{hideCoverImage}}src="{{showPath}}"></cover-image>

    </cover-view>

    </cover-view>

</view>

  takePhoto: function () {

    const ctx = wx.createCameraContext()

    ctx.takePhoto({

      quality: 'high',

      success: (res) => {

        console.log(res)

        let tempPath = res.tempImagePath

        this.setData({

          showPath: tempPath,

          hideTakeButton: true,

          hideCoverButton: false,

          hideCoverImage: false

        })

      }

    })

  },

  done: function () {

    this.hidecamera()

    let img = this.data.showPath

    if (!img{

      wx.showModal({

        showCancel: false,

        content: '拍照失败,重新再试~',

      })

      return

    }

    this.upimg(img)

  },

  error(e) {

    wx.showToast({

      title: '照片拍摄失败,请检查摄像头',

      icon: 'none'

    })

  },

  hidecamera: function () {

    this.setData({

      hidecamera: true,

      hideCoverButton: true

    });

  },

  takeAgain: function () {

    let that = this;

    that.setData({

      hideTakeButton: false,

      hideMask: false,

      hideCoverImage: true,

      hideCoverButton: true,

      filePath: ''

    });

  },


.tools {

  z-index: 100;

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

}


.take {

  width: 150rpx;

  height: 150rpx;

  border-radius: 50%;

  background: whitesmoke;

}


.take1 {

  border: 2rpx #DBE0E6 solid;

  width: 120rpx;

  height: 120rpx;

  border-radius: 50%;

  background: white;

}


.done {

  position: absolute;

  text-align: center;

  width: 50rpx;

  padding: 20rpx;

  height: 50rpx;

  line-height: 50rpx;

  border-radius: 50%;

  border: 2rpx solid #ddd;

  color: #1aad19;

}

最后一次编辑于  2020-03-20  
点赞 0
收藏
评论

5 个评论

  • 讲武德的年轻人
    讲武德的年轻人
    2020-12-10

    camera 这一页 在IOS上 cover-image 完全不显示 是什么问题

     

    2020-12-10
    赞同
    回复
  • Ling
    Ling
    2020-03-21

    选择相册的时候还是崩溃

    2020-03-21
    赞同
    回复
  • zw
    zw
    2020-03-20

     wx.showActionSheet({

          itemList: ['拍照', '相册'],

          success: res => {

            if (res.tapIndex == 0{

              this.setData({

                hidecamera: false,

                hideCoverImage: true,

                hideTakeButton: false

              })

            } else {

              wx.chooseImage({

                sizeType: 'comppressed',

                sourceType: ['album'],

                count: 1,

                complete: res => {

                  let img = res.tempFilePaths[0]

                  if (!img{

                    wx.showModal({

                      showCancel: false,

                      content: '选择图片失败,重新再试~',

                    })

                    return

                  }

                  this.upimg(img)

                }

              })

            }

          }

        })


    2020-03-20
    赞同
    回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-03-20

    如果选择相册文件呢?camera怎么代替呢?

    2020-03-20
    赞同
    回复 1
    • zw
      zw
      2020-03-20
      actionsheet
      2020-03-20
      回复
  • zw
    zw
    2020-03-20

    仅供参考

    2020-03-20
    赞同
    回复
登录 后发表内容