前言

在我本人的项目中，很大一部分是基于企业微信进行开发的，就连拍照功能也是调用企业微信的api接口进行拍照，但是，它有一个很致命的问题，总是限制次数，对于我来说我只需要获取到base64保存起来就可以了，完全不需要搞那么复杂，于是最近把它给替换了，换成另一种方式

步骤

拍照样式

原生的input真的很丑，所以我们需要对它进行一个样式的编辑，修改和调整样式
html界面

<template>
	<div>
	    <div class="face">
          <input type="file" class="upload" id="photo" capture="environment" accept="image/*" name="photo" @change="selectPhoto()"/>
          <span class="photo-text">上传图片</span>
        </div>
	</div>
</template>

这里需要说一下capture，它有两个值，一个user,是前置摄像头；一个environment，是后置摄像头
在我的项目中，我有用安卓手机和ios验证后置摄像头都是可以拍照，并且能够获取到文件的base64数据

css样式

.face{
    margin-top: 20px;
    position: relative;
  }
.face .upload{
    width: calc(100% - 279px);
    height: 41px;
    line-height: 41px;
    opacity: 0;
    position: absolute;
    z-index: 22;
    left: 0;
    margin: auto;
    right: 0;
}
.face .photo-text{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    margin: auto;
    right: 0;
    background: #CDAB6A;
    width: calc(100% - 279px);
    height: 41px;
    line-height: 41px;
    border-radius: 4px;
    text-align: center;
}

实际截图

拍照方法

selectPhoto() {
  let _this = this;
  // 通过id标签获取文件
  let file = document.getElementById("photo").files[0];
  let content = null;
  let readfile = new FileReader();
  if (file != undefined) {
    content = readfile.readAsDataURL(file, "UTF-8");
    readfile.onload =event=> {
    // base64文件
      content = event.target.result;
      // console.log("base64===",content);
    };
    readfile.onerror = function(event) {
    	console.log("拍照错误",event);
    }
  } else {
    console.log("未拍照");
  }
},

完整代码

<template>
	<div>
	    <div class="face">
          <input type="file" class="upload" id="photo" capture="environment" accept="image/*" name="photo" @change="selectPhoto()"/>
          <span class="photo-text">上传图片</span>
        </div>
	</div>
</template>
<script>
export default {
  name: 'xxx',
  data() {
		return {
		base64: null, // 图片base64
		}
	},
   methods: {
   // 拍照方法
	selectPhoto() {
	  let _this = this;
	  // 通过id标签获取文件
	  let file = document.getElementById("photo").files[0];
	  let content = null;
	  let readfile = new FileReader();
	  if (file != undefined) {
	    content = readfile.readAsDataURL(file, "UTF-8");
	    readfile.onload =event=> {
	    // base64文件
	      content = event.target.result;
	      // 接收base64数据
	      this.base64=content
	       console.log("base64===",this.base64);
	    };
	    readfile.onerror = function(event) {
	    	console.log("拍照错误",event);
	    }
	  } else {
	    console.log("未拍照");
	  }
	},
	}
}
</script>
<style scoped>
.face{
    margin-top: 20px;
    position: relative;
  }
.face .upload{
    width: calc(100% - 279px);
    height: 41px;
    line-height: 41px;
    opacity: 0;
    position: absolute;
    z-index: 22;
    left: 0;
    margin: auto;
    right: 0;
}
.face .photo-text{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    margin: auto;
    right: 0;
    background: #CDAB6A;
    width: calc(100% - 279px);
    height: 41px;
    line-height: 41px;
    border-radius: 4px;
    text-align: center;
}
</style>

改善 — 2022-12-02修改

以上虽然也能够实现拍照获取图片的base64字符进行处理，但是它有一个很大的问题:无法限制图片的大小
因此本次对其进行调整，添加压缩图片的逻辑

<template>
	<div>
	    <div class="face">
          <input type="file" class="upload" id="photo" capture="environment" accept="image/*" name="photo" @change="selectPhoto()"/>
          <span class="photo-text">上传图片</span>
        </div>
	</div>
</template>
<script>
export default {
  name: 'xxx',
  data() {
		return {
		base64: null, // 图片base64
		imageBase64: '', // 获取压缩后的base64
		}
	},
   methods: {
   // 拍照方法
selectPhoto() {
  let _this = this;
  let file = document.getElementById("photo").files[0];
  let content = null;
  let readfile = new FileReader();
  if (file != undefined) {
    console.log("等待图片压缩...");
    content = readfile.readAsDataURL(file, "UTF-8");
    readfile.onload =event=> {
      content = event.target.result;
      this.compressImg(content,0.99);
       console.log("base64===",content);
    };
    readfile.onerror = function(event) {
    console.log("拍照错误",event);
    }
  } else {
    console.log("未拍照");
  }
},
// 图片压缩
// 传入参数 base64：图片的base64数据 ，scale：压缩比例（主要是为了指定初始压缩比看是否达到要求图片大小） 
compressImg (base64, scale) {
  // 处理缩放，转换格式
  // new 一个图片，用canvas来压缩
  const img = new Image()
  img.src = base64
  // 必须保存this，才能获取到压缩后的值
  const _this = this;
  img.onload = function () {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.setAttribute('width', this.width)
    canvas.setAttribute('height', this.height)
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    // 转成base64 文件
    let base64 = canvas.toDataURL('image/jpeg')
    // 根据自己需求填写大小 1m为1024 *1024   2m为2 * 1024 * 1024
    // 以下逻辑为判断文件逻辑是否达到要求大小，
    // 没有则压缩比例不断减少0.01直到文件大小达到要求
    while (base64.length > 1024 * 1024 * 1) {
      scale -= 0.01
      base64 = canvas.toDataURL('image/jpeg', scale)
    }
    _this.imageBase64 = base64;
    console.log('图片压缩成功!');
  }
},
	}
}
</script>
<style scoped>
.face{
    margin-top: 20px;
    position: relative;
  }
.face .upload{
    width: calc(100% - 279px);
    height: 41px;
    line-height: 41px;
    opacity: 0;
    position: absolute;
    z-index: 22;
    left: 0;
    margin: auto;
    right: 0;
}
.face .photo-text{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    margin: auto;
    right: 0;
    background: #CDAB6A;
    width: calc(100% - 279px);
    height: 41px;
    line-height: 41px;
    border-radius: 4px;
    text-align: center;
}
</style>