// ios手机图片被翻转处理
import EXIF from 'exif-js'
// file为Blob对象
function transformImg(file) {
let Orientation = null
return new Promise((resolve => {
EXIF.getData(file, function () {
EXIF.getAllTags(this)
Orientation = EXIF.getTag(this, 'Orientation')
if (Orientation && Orientation != 1) { // 图片角度不正确
let canvas = document.createElement("canvas")
let ctx = canvas.getContext('2d')
let img = new Image()
img.src = window.URL.createObjectURL(file)
img.onload = function () {
let imgHeight = this.height
let imgWidth = this.width
switch (Orientation) {
case 6: // 旋转90度
canvas.width = imgHeight
canvas.height = imgWidth
ctx.rotate(Math.PI / 2)
ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight)
break
case 3:// 旋转180度
canvas.width = imgWidth
canvas.height = imgHeight
ctx.rotate(Math.PI)
ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight)
break
case 8: // 旋转-90度
canvas.width = imgHeight
canvas.height = imgWidth
ctx.rotate(3 * Math.PI / 2)
ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight)
break
default:
ctx.drawImage(this, 0, 0, imgWidth, imgHeight)
}
let dataUrl = canvas.toDataURL("image/jpeg")// canvase 转为base64
file = dataURLtoBlob(dataUrl) // base64转为blog
resolve(file)
}
} else {
resolve(file)
}
})
}))
}
function dataURLtoBlob(dataUrl) {
let 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 Blob([u8arr], {type: mime})
}
export default transformImg
exif.js解决ios手机上传竖拍照片旋转90度问题
最新推荐文章于 2019-10-29 14:49:29 发布