camera 组件代替choose image
发布于 5 年前 作者 yiyong 4022 次浏览 来自 分享

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;

}

4 回复

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

选择相册的时候还是崩溃

 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)

            }

          })

        }

      }

    })

回到顶部