# 11.2 相机（Camera）

<template>
  <div class="wrapper">
    <midea-header title="mideaCameraView" ></midea-header>
    <midea-camera-view ref="mycomponent" @takePhotoFinish="takePhotoFinish" class="progresscycle" :data="componentData">
    </midea-camera-view>

    <text class="btn" @click="takePicture">拍照</text>
    <text class="btn" @click="isAutoOpenFlash">自动闪光灯</text>
    <text class="btn" @click="changeCameraPosition">切换摄像头</text>
    <text class="btn" @click="openTorch">打开手电筒</text>
    <text class="btn" @click="closeTorch">关闭手电筒</text>

    <image class="image" :src="imgSrc"></image>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgSrc: '',
      componentData: {
        resolution: 'default', //默认最高，支持480P,720P,1080P,4K，以及自定义格式：  xxx*yyy ( 444*666 )
        imageSaveFolder: 'PreViewPhotos', // 可以指定存储目录，默认图片存储在PreViewPhotos文件夹目录下 ，图片的命名规则是preImage + 下划线+ 时间戳。 支持绝对路径
        autoFocus: true, //是否自动对焦
        isUseFrontCamera: true, //true 启动页面 开启前置摄像头，false开启后置
        isAutoOpenFlash: true, //是否自动开启闪光灯
        isNeedBase64: true, //是否提供base64格式的图片数据
        compressRatio: 0.6, //压缩系数，默认不压缩为1，范围0 ~ 1 8.8新增
        needSaveToAlbum: true //是否保存到相册，默认是保存到相册 8.8新增
      }
    }
  },
  methods: {
    takePicture(event) {
      this.$refs.mycomponent.takePhoto()
    },

    //拍摄完成事件名 takePhotoFinish ,
    // filePath   为图片路径key
    // imgBase64  为图片Base64 key（默认是不传Base64图片数据。需要配置数据里面配置isNeedBase64:true）
    takePhotoFinish(data) {
      //加载base64图片
      this.imgSrc = 'data:image/png;base64,' + data.imgBase64
      //  this.imgSrc =  "file://local" +  data.filePath  //加载本地图片
    },

    isAutoOpenFlash(event) {
      this.$refs.mycomponent.openFlashLight({
        isAutoOpenFlash: true
      })
    },
    changeCameraPosition(event) {
      this.$refs.mycomponent.changeCameraPosition()
    },
    openTorch(event) {
      this.$refs.mycomponent.openTorch({
        openTorch: true
      })
    },
    closeTorch(event) {
      this.$refs.mycomponent.openTorch({
        openTorch: false
      })
    }
  }
}
</script>

<style scoped>
.wrapper {
  flex-direction: column;
}
.progresscycle {
  width: 500px;
  height: 600px;
  top: 100px;
  margin-left: 100px;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 200px;
  height: 70px;
  top: 100px;
  margin-left: 100px;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 10px;
  margin-left: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-width: 2px;
  border-style: solid;
  color: #666666;
  border-color: #dddddd;
  background-color: #f5f5f5;
}
.image {
  width: 300px;
  height: 400px;
  margin-left: 300px;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}
</style>