项目中遇到上传的照片，展示在网页中的时候角度不对，exif-js可以解决这个问题
html
<!DOCTYPE html> <html> <head> <title>1111</title> </head> <body> <img src="./123.JPG" width="300" class="preivew2"> <script src="https://cdn.jsdelivr.net/npm/exif-js"></script> </body> </html>
js
<script type="text/javascript">
rotateImg('./123.JPG').then(
blob => {document.querySelector('.preivew2').src = URL.createObjectURL(blob)}
)
function rotateImg(file) {
return new Promise((resolve, reject) => {
let img = new Image();
img.src = file;
img.onload = () => {
// 获取图片源数据 上面已经引入EXIF全局变量
EXIF.getData(img, function () {
// 获取图片orientation值
console.log(EXIF.getTag(this, "Orientation"))
let orientation = EXIF.getTag(this, "Orientation");
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
console.log(orientation,canvas,ctx)
switch (orientation) {
case 3: // 旋转180°
canvas.width = img.width;
canvas.height = img.height;
ctx.rotate((180 * Math.PI) / 180);
ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
break;
case 8: // 旋转90°
canvas.width = img.height;
canvas.height = img.width;
ctx.rotate((90 * Math.PI) / 180);
ctx.drawImage(img, 0, -img.height, img.width, img.height);
break;
case 6: // 旋转-90°
canvas.width = img.height;
canvas.height = img.width;
ctx.rotate((-90 * Math.PI) / 180);
ctx.drawImage(img, -img.width, 0, img.width, img.height);
break;
default: // 没有源信息的图片和正常的图片是不需要旋转的
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
break;
}
canvas.toBlob(file => resolve(file), 'image/jpeg', 1)
})
}
})
}
</script>