vue项目拍照或上传图片并实现转化为base64格式
更新时间：2023年11月17日 16:28:21 作者：钥零零
这篇文章主要介绍了vue项目拍照或上传图片并实现转化为base64格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目拍照或上传图片并转化为base64格式
需求
vue项目中，H5点击按钮触发上传图片或拍照上传，上传的图片使用base64位传输到后台，最终实现身份证拍照识别功能。
实现过程
（1）设置一个按钮和一个隐藏的input，点击按钮是触发按钮上传图片和拍照功能
<div>
<input id="filePhoto" type="file" ref="file" accept="image/*" hidden @change="onInputChange($event)" />
<div @click="triggerUpload">
<img src="@res/images/scenicSpots/add-circle-white.png" />
<span>上传图片</span>
</div>
</div>
（2）将上传的图片转化为base64格式
//点击图片触发文件上传
triggerUpload() {
$("#filePhoto").click();
},
//文件上传到浏览器触发事件
onInputChange(el) {
var self = this;
var file = el.target.files[0];
console.log(file)
var type = file.type.split('/')[0];
if(type === 'image') {
//将图片转化为base64
var reader = new FileReader();
reader.readAsDataURL(file); // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径,
reader.onload = function () {
var image = reader.result; // image即base64格式，后面调用后端请求传入image
}
}else{
self.$toast.showToast('请正确上传图片');
}
},
vue图片上传组件，包括base64、二进制上传及图片旋转
最近做的vue项目中好多涉及到图片上传的，为了方便开发就进行了相关总结。
因为公司有好多项目，并且使用的是不同后台语言，有的需要通过base64字符串传递，有的需要转换成二进制数据流传递，有的可以直接使用from表单进行提交。后来有涉及到ios上拍照图片会旋转的问题，也一并进行了封装。
好了废话不多说直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上传</title>
</head>
<body>
<form id="upImg">
<input type='file' accept="image/*" name="avatar" placeholder="" id="img" />
</form>
<img src="" alt="" id='preImg'>
<!-- 需要引入exif.js插件 -->
<script src='./exif.js'></script>
<script>
var domImg = document.querySelector('#img')
//添加DOM事件
domImg.onchange = function upLoadImg(e, type) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
if (files[0].type.indexOf("image") < 0) {
alert("上传了非图片");
return;
}
if (files[0].size > 5 * 1000000) {
alert("上传文件过大");
return;
}
// 图片压缩成base64
compress(e.target, (base64, imgFile) => {
var upImage = new FormData();
upImage.append("fileName", imgFile.name);
var blob = convertImgDataToBlob(base64);
upImage.append("file", blob);
//上传图片接口
this.$http({
method: "POST",
url: interfaced.aliYun,
body: upImage
}).then(
res => {
console.log(res);
},
err => {
console.log(err);
}
);
});
//将base64转换成二进制函数
function convertImgDataToBlob(base64Data) {
var format = "image/jpeg";
var base64 = base64Data;
var code = window.atob(base64.split(",")[1]);
var aBuffer = new window.ArrayBuffer(code.length);
var uBuffer = new window.Uint8Array(aBuffer);
for (var i = 0; i < code.length; i++) {
uBuffer[i] = code.charCodeAt(i) & 0xff;
}
var blob = null;
try {
blob = new Blob([uBuffer], {
type: format
});
} catch (e) {
window.BlobBuilder =
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (e.name == "TypeError" && window.BlobBuilder) {
var bb = new window.BlobBuilder();
bb.append(uBuffer.buffer);
blob = bb.getBlob("image/jpeg");
} else if (e.name == "InvalidStateError") {
blob = new Blob([aBuffer], {
type: format
});
} else {}
}
return blob;
}
//将图片压缩成base64函数
function compress(event, callback) {
//图片方向角
var Orientation = null;
var file = event.files[0];
var reader = new FileReader();
//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
reader.onload = function (e) {
var image =document.createElement("img");
image.onload = function () {
//使用canvas重绘图片
var canvas = document.createElement("canvas");
var x = this.width;
var y = this.height;
this.width = 375 * 2;
this.height = this.width / x * y;
var width = this.width;
var height = this.height;
canvas.width = this.width;
canvas.height = this.height;
var context = canvas.getContext("2d");
context.clearRect(0, 0, width, height);
//对图片进行旋转
switch (Orientation) {
case 3:
context.rotate(180 * Math.PI / 180);
context.drawImage(this, -this.width, -this.height, this.width, this.height);
break;
case 6:
context.rotate(90 * Math.PI / 180);
context.drawImage(this, 0, -this.width, this.height, this.width);
break;
case 8:
context.rotate(270 * Math.PI / 180);
context.drawImage(this, -this.height, 0, this.height, this.width);
break;
case 2:
context.translate(this.width, 0);
context.scale(-1, 1);
context.drawImage(this, 0, 0, this.width, this.height);
break;
case 4:
context.translate(this.width, 0);
context.scale(-1, 1);
context.rotate(180 * Math.PI / 180);
context.drawImage(this, -this.width, -this.height, this.width, this.height);
break;
case 5:
context.translate(this.width, 0);
context.scale(-1, 1);
context.rotate(90 * Math.PI / 180);
context.drawImage(this, 0, -this.width, this.height, this.width);
break;
case 7:
context.translate(this.width, 0);
context.scale(-1, 1);
context.rotate(270 * Math.PI / 180);
context.drawImage(this, -this.height, 0, this.height, this.width);
break;
default:
context.drawImage(this, 0, 0, this.width,this.height);
}
var quality = 0.9; //压缩程度
var data;
var result;
var length;
//控制图片上传的大小，注意若图片过大 ajax上传的时候会出现参数为null的错误
//这里如果图片过大会将图片压缩程度放大
do {
data = canvas.toDataURL("image/jpeg", quality);
length = data.length;
result = (length / 4 * 3 + 1023) / 1024; //计算压缩后图片的大小
quality -= 0.05;
} while (result > 450);
//data：base64
document.querySelector('#preImg').src = data
callback(data, event.files[0]);
};
image.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近项目中需要在线预览WORD文档,所以给大家总结下,这篇文章主要给大家介绍了关于vue项目如何实现前端预览word与pdf格式文件的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了在vue3中使用import.meta.env方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式,因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定,这篇文章主要介绍了vue3 Class 与 Style 绑定操作方法,需要的朋友可以参考下2024-05-05![如何解决前端上传Formdata中的file为[object Object]的问题](//img.jbzj.com/images/xgimg/bcimg3.png)
如何解决前端上传Formdata中的file为[object Object]的问题
文件上传是Web开发中常见的功能之一,下面这篇文章主要给大家介绍了关于如何解决前端上传Formdata中的file为[object Object]问题的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
Vue实现hash模式网址方式(就是那种带#的网址、井号url)
这篇文章主要介绍了Vue实现hash模式网址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下2018-06-06
这篇文章主要给大家介绍了关于vue3使用ref获取dom结果为'null'的原因详析,ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue js生命周期，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
在vue项目开发中,我们需要对数组进行处理等问题,这里简单记录遍历数组的几种方法,这篇文章主要给大家介绍了关于vue中数组常用的6种循环方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家介绍了vue中 this.$set的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
![如何解决前端上传Formdata中的file为[object Object]的问题](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论