前言

在我本人的项目中，很大一部分是基于企业微信进行开发的，就连拍照功能也是调用企业微信的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=contentconsole.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, // 图片base64imageBase64: '', // 获取压缩后的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.01base64 = 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进行封装照相功能

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

java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
vue + 高德原生 API实现地图可视化
vue + 高德原生 API 由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API: 当前项目环境 vue2.0+: 创建项目时,如果安装 eslint ,建议关闭eslint语法 ...
原生video标签隐藏底部功能按钮
原生video标签隐藏底部功能按钮一.controlslist属性(只有3个配置项) 二.shadow DOM 1.查看shadow DOM(第一种) 2.查看shadow DOM(第二种) ①操作 ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
Vue 3中令人激动的新功能：Fragment+Suspense+多v-model
上一篇:Vue 3中令人激动的新功能:Composition API 本文接着上文继续翻译未完的内容. 全局安装/配置API更改我们可以发现我们在实例化和配置应用程序的方式上又有了一个重大的变化.我 ...
vue和原生js的优点分析
我的这篇文章,帮助大家分析vue相对原生js的优缺点,vue的一些好处如下: 一.控件跟数据自动绑定可以直接使用data里面的数据值来提交表单,而不需要再使用$("#myid") ...
Vue回炉重造之封装一个实用的人脸识别组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
蓝牙扫描枪v-model双向数据绑定缓慢，改为原生input输入的方式——基础积累
蓝牙扫描枪v-model双向数据绑定缓慢,改为原生input输入的方式最近在做apicloud的app,设备是一个华为平板,需要外接一个蓝牙扫描枪,通过扫描二维码获取二维码的内容,展示在输入框中. ...
原生input标签实现ajax单文件上传和多文件上传
自己还是一个菜鸟的时候,有次项目经理让我用Java做一个多文件上传的功能.那时候技术学得很渣,最多只能够实现单文件上传.做了一个星期都没有做出来,于是项目经理不留半点情面,当着办公室所有人的面痛批我一 ...

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

前言

步骤

拍照样式

拍照方法

完整代码

改善 — 2022-12-02修改

结语

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

最新文章

热门文章