vue通过原生input进行封装照相功能

￡神魔★判官ぃ 2024-04-01 11:08 27阅读 0赞

## 前言 ##

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

## 步骤 ##

## 拍照样式 ##

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

这里需要说一下`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;
    }

`实际截图`  
![在这里插入图片描述][0e07ef15ec9143288b4222d09b780012.png]

## 拍照方法 ##

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("未拍照");
      }
    },

## 完整代码 ##

### 改善 — 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>

## 结语 ##

以上就是本人通过原生input进行封装照相功能

[0e07ef15ec9143288b4222d09b780012.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d8bfeef7a8c74ad4a71ace5a97a9060f.png