<input name="video" type="file" accept="image/*" capture="camera" @change="onFileChange">
onFileChange (e) {
if(!e.target.files.length) return false;
const self = this;
const file = e.target.files[0];
const fileName = file.name;
const fileType = file.type;
const formData = new FormData();
for(let i in self.uploadData) {
formData.append(i, self.uploadData[i]);
}
// formData.append('fileInput', file, fileName);
// self.doUpload(formData);
// return false;
// document.getElementById('originFile').src = window.URL.createObjectURL(file)
if(file) {
// this.$vux.loading.show()
if(fileType === 'image/jpeg' || fileType === 'image/png') {
self.getOrientation(file, Orientation => {
const reader = new FileReader();
reader.onload = (ev) => {
const data = ev.target.result;
const image = new Image();
image.src = data;
// console.log('原始base64:', data);
image.onload = () => {
let imgWidth = image.width;
let imgHeight = image.height;
// console.log('onload start', imgWidth, imgHeight)
// 这里先设置最大宽高1920*1080,先进行压缩,否则后台再次压缩图片会很糊(实际上图片旋转过,else if 不会进入,宽度会一直是1080px)
if(imgWidth > imgHeight && imgWidth > 1080){
imgWidth = 1080;
imgHeight = Math.ceil(1080 * image.height / image.width);
}else if(imgWidth < imgHeight && imgHeight > 1920){
imgWidth = Math.ceil(1920 * image.width / image.height);
imgHeight = 1920;
}
const canvas = document.createElement("canvas"),
ctx = canvas.getContext('2d');
console.log('原图像宽高以及旋转信息Orientation:', image.width, image.height, Orientation);
canvas.width = imgWidth;
canvas.height = imgHeight;
console.log(Orientation, '-1')
if(Orientation && Orientation != 1){
switch(Orientation){
case 6:
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, 0, -imgHeight, imgWidth, imgHeight);
break;
case 3:
ctx.rotate(Math.PI);
ctx.drawImage(image, -imgWidth, -imgHeight, imgWidth, imgHeight);
break;
case 8:
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(3 * Math.PI / 2);
ctx.drawImage(image, -imgWidth, 0, imgWidth, imgHeight);
break;
}
} else {
ctx.drawImage(image, 0, 0, imgWidth, imgHeight);
}
if (navigator.userAgent.match(/Android/i)) {// Android 压缩使用JPEGEncoder,质量使用100。提高ocr识别率
try {
console.log('encoder:100')
const encoder = new JPEGEncoder();
this.dataURL = encoder.encode(ctx.getImageData(0, 0, imgWidth, imgHeight), 100);
} catch (error) {// 不支持JPEGEncoder 也使用canvas.toDataURL
this.dataURL = canvas.toDataURL(fileType, 0.92);
}
} else {// iphone 和其他使用canvas.toDataURL
this.dataURL = canvas.toDataURL(fileType, 0.92);
}
console.log('图片纠正旋转后base64:', this.dataURL);
const finalFile = self.dataURLtoFile(this.dataURL, fileName);
// console.log('转化为二进制的图片:', finalFile, finalFile.size)
formData.append('fileInput', finalFile, fileName);
self.doUpload(formData);
}
};
reader.readAsDataURL(file);
}, () => {
formData.append('fileInput', file, fileName);
self.doUpload(formData);
});
} else {
formData.append('fileInput', file, fileName);
self.doUpload(formData);
}
} else {
this.$vux.alert.show({
title: '提示',
content: '照片不存在'
})
}
},