这段时间开发时发现 ios14 会自动判断图片得方向 ios13及一下 不会 所以需要我们代码去判断
首先需要引入 exif-js
npm install exif-js --save
photoChange(el) {
this.$vux.loading.show({
text: '图片上传中'
})
var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
var type = file.type.split('/')[0];
if ( type === 'image' ){
//将图片img转化为base64
var that = this;
var orientation = ''
EXIF.getData(file, function () {
orientation = EXIF.getTag(this, 'Orientation');
});
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(evt){
const base64 = evt.target.result;
// 将图片旋转到正确的角度 并压缩
console.log('方向',orientation)
that.resetOrientation(base64, orientation, function (resultBase64) {
that.b64toBlob(resultBase64, function (blob) {
//调用接口上传图片
that.upload(blob)
});
});
}
}else{
alert('上传了非图片');
}
}
resetOrientation(srcBase64, srcOrientation, callback) {
var self = this
const img = new Image();
img.onload = function () {
const width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
// 判断图片尺寸压缩一定比率
const big = (img.width > img.height) ? img.width : img.height;
let rate = 1;
if (big > 840) {
rate = 840 / big;
}
canvas.width = width * rate;
canvas.height = height * rate;
// 安卓机不需要矫正图片
var u = navigator.userAgent;
var ios = 0
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
if (!isAndroid) {
ios = navigator.userAgent.match(/os\s+(\d+)/i)[1] - 0
}
if (isAndroid || ios < 14) {
if(srcOrientation && srcOrientation !== 1){
// 判断图片方向,压缩并矫正
switch (srcOrientation) {
// 当图片旋转180°时
case 3:
ctx.rotate(Math.PI);
ctx.drawImage(this, -this.width * rate, -this.height * rate, this.width * rate, this.height * rate);
break;
// 当图片旋转90°时
case 6:
canvas.width = this.height * rate;
canvas.height = this.width * rate;
ctx.rotate(Math.PI / 2);
// (0,-imgHeight) 从旋转原理图那里获得的起始点
ctx.drawImage(this, 0, -this.height * rate, this.width * rate, this.height * rate);
break;
// 当图片旋转270°时
case 8:
canvas.width = this.height * rate;
canvas.height = this.width * rate;
ctx.rotate(3 * Math.PI / 2);
ctx.drawImage(this, -this.width * rate, 0, this.width * rate, this.height * rate);
break;
default:
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
}
}else {
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
}
} else if (ios >= 14) {
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
}
// 返回 base64
callback(canvas.toDataURL('image/jpeg'));
};
img.src = srcBase64;
},
b64toBlob(b64, onsuccess, onerror) {
let img = new Image();
img.onerror = onerror;
img.onload = function onload() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let width = img.width;
let height = img.height;
let ctx = canvas.getContext('2d');
let rate = 1;
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
canvas.toBlob(onsuccess);
};
img.src = b64;
},
upload(imgUrl){
let self = this
var formdata = new FormData();
formdata.append('file',imgUrl);//下面是要传递的参数
formdata.append('assetsNo',this.assetsNo);//下面是要传递的参数
this.axios.post(this.apiUrl +'/xxxxxx',
formdata
,{
headers: {
'token': this.token,
'Content-Type':'multipart/form-data'
}//设置header信息
}).then((response)=>{
if(response.data.errCode==0){
self.$vux.loading.hide()
self.getInventoryInfo()
}else{
console.log(response)
}
}).catch((response)=>{
console.log(response);
})
},