ios html调起拍照,解决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', ()=>{Toast.fail('图片上传失败', 1)

}, false);

xhr.onreadystatechange = () => {

if (xhr.readyState === 4) {

if(xhr.status === 500){

Toast.fail('图片上传失败', 1)

}

const result = JSON.parse(xhr.responseText);

if (result.status === 10000) {

this._Upload(this.state.status,`http:${result.url}`,result.filename)

} else {

if(this.state.status === 1){

this.setState({

haveAvatar:[]

})

}else if(this.state.status === 2){

this.setState({

haveNationalEmblem:[]

})

}

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

});

})

}

来源：https://www.cnblogs.com/it-Ren/p/12802999.html