问题：三星手机拍照时，正面拍照照片会旋转，左横拍才会正常。如下图所示
image
image
image
上传之后，就是这亚子，由于后台需要读取正脸照，去匹配，显然这亚子不行。
解决后：
image
**解决问题：使用exif.js来获取图像数据，然后进行处理 **
1. 安装依赖 npm install exif-js --save
- 引用依赖 import EXIF from 'exif-js';
3. 获取图像数据 EXIF.getData();
获取某个数据方向参数 EXIF.getTag(this, 'Orientation');
代码如下
// 处理图片旋转 方法
handleImgRotate(target， listName) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let orientation = null;
let imgObj = target;
let _this = this;
// 图片压缩
if (imgObj && imgObj.width > 1000 && imgObj.height > 1000) {
imgObj.width = imgObj.width / 6;
imgObj.height = imgObj.height / 6;
}
EXIF.getData(imgObj, function() {
// 获取某个数据方向参数
orientation = EXIF.getTag(this, 'Orientation');
// 为6的时候，图片需宽高反转
if (orientation && orientation == 6 && imgObj.width > imgObj.height) {
canvas.width = imgObj.height;
canvas.height = imgObj.width;
} else {
canvas.width = imgObj.width;
canvas.height = imgObj.height;
}
ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height);
if (orientation) {
// 为1，正常
switch (Number(orientation)) {
case 3: // 需要180度旋转
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(imgObj, -imgObj.width, -imgObj.height, imgObj.width, imgObj.height);
break;
case 6: // 需要顺时针（向左）90度旋转
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(imgObj, 0, 0, imgObj.width, -imgObj.height);
break;
case 8: // 需要逆时针（向右）90度旋转
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(imgObj, -imgObj.height, 0, imgObj.height, imgObj.width);
break;
default:
ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height);
break;
}
}
_this[listName].push({ image: canvas.toDataURL('image/jpeg')});
});
return _this[listName];
遇到问题，使用的 element-ui 框架里的el-upload组件，上传成功后，无法读取上传后image的图片信息
解决问题：需要循环出所有图片，并load加载方法，获取信息
// 在el-upload中调用改变后的方法
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:auto-upload="false"
multiple
:on-change="imageChange"
<img style="display: none;" v-for="(item, index) in avatarList" :key="index" :src="item.image" @load="avatarCallback($event)" />
</el-upload>
imageChange(file, fileList) {
this.avatarList = []; // 用于图片需重新load加载
this.avatarListBase = []; // 改变一次时，需清空之前数据
fileList.forEach((item) => {
this.avatarList.push(
{image: URL.createObjectURL(item.raw)}); }
);
},
avatarCallback(e) {
let data = this.handleImgRotate(e.target); // 调用处理旋转的方法
this.avatarListBase.push(data); // 添加到一个数组中，用于接口上传参数时
}
// 上传接口时：需将base64URL转换为file
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
},
addWhiteUser() {
this.avatarListBase.forEach((item, index) => {
let formData = new FormData();
let raw = this.dataURLtoFile(this.avatarListBase[index].image, 'face' + index + '.jpg');
formData.append('imgs['+[index]+']', raw); });
});
}
