相机（Camera）

11.2 相机（Camera）

#导入组件

该组件是在是原生的组件，无需导入组件。该组件从8.8版本开始生效

使用上比较简单，通过class设置对应的宽高即可使用。
原生提供基础的拍照功能，比如拍照，翻转摄像头，分辨率设定，打开手电筒，自动闪光灯等，前端在此基础上绘制页面即可。
初始数据从data的map里获取，更新也是一样

#实例：

<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>

#属性（data）

Prop	Type	Required	Default	Description
resolution	String	N	default	默认最高，支持480P,720P,1080P,4K，以及自定义格式： xxxyyy ( 444666 )
imageSaveFolder	String	N	PreViewPhotos	指定存储目录，默认图片存储在PreViewPhotos文件夹目录下 ，图片的命名规则是preImage + 下划线+ 时间戳。 支持绝对路径
autoFocus	Boolean	N	true	是否自动对焦
isUseFrontCamera	Boolean	N	true	true 启动页面 开启前置摄像头，false开启后置
isAutoOpenFlash	Boolean	N	true	是否自动开启闪光灯
isNeedBase64	Booleanx	N	true	是否提供base64格式的图片数据
compressRatio	Number	N	1	压缩系数，默认不压缩为1，范围0 ~ 1, (8.8新增)
needSaveToAlbum	Boolean	N	true	是否保存到相册，默认是保存到相册 (8.8新增)

#方法

事件名称	参数类型	说明
takePhoto	-	拍照时触发。拍照成功会触发组件事件：takePhotoFinish,此事件里面带有图片路径。详细请见下面的事件文档。
openFlashLight	Object	打开自动闪光灯模式：{ isAutoOpenFlash : true }, 关闭自动闪光灯模式：
changeCameraPosition	-	切换摄像头：默认前置，点击会再前置和后置之间切换
openTorch	Object	打开手电筒：{ openTorch : true }, 关闭手电筒：

#事件

组件事件	描述	返回值
takePhotoFinish	拍摄完成，点击拍摄后触发。如何加载本地路径的图片和base64格式图片。