解决HTML5IOS拍照上传图片逆时针旋转90度问题，React
一般情况下是 是使用 Exif.js 来读取图像的元数据 orientation(方向)
但是这里使用了antd-mobile 的ImagePicker 组件， onChange 函数直接返回了orientation参数，所以不需要使用exif.js了
1. 获取orientation参数和文件参数
onChange = (files, type) => {
if(type === 'add'){
this.setState({
loading:true,
orientation:files[0].orientation
})
this.transformBase64(files[0].file)
}else {
this.setState({loading:true})
this._Upload(this.state.index,'')
}
}2.转换base64
//转换base64
transformBase64 (file){
const self = this;
const reader = new FileReader();
reader.readAsDataURL(file);
/* eslint-disable func-names */
// 箭头函数会改变this，所以这里不能用肩头函数
reader.onloadend = function () {
// this.result就是转化后的结果
const result = this.result;
// 将base64添加到图片标签上
const img = new Image();
img.src = result;
img.onload = function () {
// 获取旋转后的图片
const data = self.getRotateImg(img,self.state.orientation);
// 如果上传接口不支持base64，则这里需要将base64转为文档流
const file = self.dataURLtoFile(data);
// 调用接口，上传图片
self.transformFileToFormData(file)
}
};
}3.将File append进 FormData
// 将File append进 FormData
transformFileToFormData (file) {
const formData = new FormData();
// 自定义formData中的内容
// type
formData.append('type', file.type);
// size
formData.append('size', file.size || "image/jpeg");
// name
formData.append('name', file.name);
// lastModifiedDate
formData.append('lastModifiedDate', file.lastModifiedDate);
// append 文件
formData.append('file', file);
// 上传图片
this.uploadImg(formData);
}4.获取图片返回地址
uploadImg = (formData) => {
const xhr = new XMLHttpRequest();
// 进度监听
// xhr.upload.addEventListener('progress', (e)=>{console.log(e.loaded / e.total)}, false);
// 加载监听
// xhr.addEventListener('load', ()=>{console.log("加载中");}, false);
// 错误监听
xhr.addEventListener('error', ()=>{
const step = this.state.index;
this.setState({
modeling:false
});
if(step === 1){
this.setState({
faced:[]
})
}else if(step === 2){
this.setState({
lookUp:[]
})
}else if(step === 3){
this.setState({
overLook:[]
})
}else if(step === 4){
this.setState({
left:[]
})
}else if(step === 5){
this.setState({
right:[]
})
}
Toast.fail('建模失败', 1)
}, false);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if(xhr.status === 200 ){
const result = JSON.parse(xhr.responseText);
if (result.status === 10000) {
this._Upload(this.state.index,`http:${result.url}`,result.filename)
this.setState({
faced:[{
url:`http:${result.url}`,
id:123
}]
})
} else {
const step = this.state.index;
this.setState({
modeling:false
});
if(step === 1){
this.setState({
faced:[]
})
}else if(step === 2){
this.setState({
lookUp:[]
})
}else if(step === 3){
this.setState({
overLook:[]
})
}else if(step === 4){
this.setState({
left:[]
})
}else if(step === 5){
this.setState({
right:[]
})
}
Toast.fail(result.message,1.5)
}
}else {
const step = this.state.index;
this.setState({
modeling:false
});
if(step === 1){
this.setState({
faced:[]
})
}else if(step === 2){
this.setState({
lookUp:[]
})
}else if(step === 3){
this.setState({
overLook:[]
})
}else if(step === 4){
this.setState({
left:[]
})
}else if(step === 5){
this.setState({
right:[]
})
}
Toast.fail('建模失败', 1)
}
}
};
xhr.open('POST', '/api/file/file/upload' , true);
xhr.send(formData);
};5.上传图片
_Upload = (status,src,filename) => {
this.setState({
loading:true
})
this.tag = 'faced_id_card'
if(status === 1){
this.tag = "faced_id_card"
}else if(status === 2){
this.tag = "back_id_card"
}
HttpUtils.postForm('/api/face/image/save', {
tag:this.tag,
scheme:'http:',
category:2,
filename
}).then(res => {
this.setState({
loading:false
})
if (res.status === 10000) {
if(src === ''){
Toast.info('删除成功',1)
if(status === 1 ){
this.setState({
haveAvatar:[]
})
}else if(status === 2 ){
this.setState({
haveNationalEmblem:[]
})
}
}else {
Toast.info('上传成功',1)
if(this.state.status === 1 ){
this.setState({
haveAvatar:[{
url:src,
id:Number((Math.random()*10000).toFixed(0))
}],
})
}else if(this.state.status === 2 ){
this.setState({
haveNationalEmblem:[{
url:src,
id:Number((Math.random()*10000).toFixed(0))
}],
})
}
}
} else {
Toast.fail(res.message,1.5)
}
}).catch(err => {
Toast.info('操作失败',1.5)
this.setState({
loading:false
});
})
}后续：
遇到的问题
IphoeXS / iphone 6S / iphone7 在未处理的情况下都是逆时针90度 获取的Orientation为6
iphone XR / iphone 11 在未处理的情况下是正常的 获取的Orientation 也是6
找到原因
解决办法：
let userAgent= navigator.userAgent.toLowerCase();
let ios=userAgent.match(/cpu iphone os (.*?) like mac os/);
let reg = /.*\..*/; //判断是否有小数点
if(!ios){
//正常
}else{
let iosVersion = ios[1].replace(/_/g,"."); //获取ios系统版本
if(Number(iosVersion.split('.')[0]) < 13){
//转
}else {
if(Number(iosVersion.split('.')[0]) > 13){
//正常
}else {
//等于13 判断ios系统有无.
if(reg.test(iosVersion)){
if(Number(iosVersion.split('.')[1]) < 4){
//转
}else {
//正常
}
}else {
//转
}
}
}
}附加：react 使用exif的办法
yarn add exif-js
import {EXIF} from 'exif-js';
let self = this
EXIF.getData(files[0].file, function() {
//alert(EXIF.getTag(this, 'Orientation'));
console.log("this",JSON.stringify(EXIF.getTag(this, 'Orientation')))
console.log('让我康康or',EXIF.getTag(this, 'Orientation'))
// return
self.setState({
or2:JSON.stringify(this.exifdata)
})
});- 上一篇 »解决html5 canvas 绘制字体、图片与图形模糊问题
- 下一篇 »Html5 上传文件