js判断图片旋转角度

在JavaScript中，判断图片的旋转角度通常涉及到图像处理和文件元数据的读取。以下是一些基础概念和相关方法：

基础概念

EXIF数据：Exchangeable Image File Format（可交换图像文件格式）数据，它包含了关于图像的元数据，如拍摄时间、相机型号、ISO设置以及方向信息等。
方向标签：在EXIF数据中，有一个特定的标签（通常是Orientation）用于指示图像应该如何被旋转以显示正确的方向。

类型

自动旋转：根据EXIF数据自动调整图片方向。
手动旋转：用户可以通过界面手动调整图片角度。

应用场景

社交媒体平台上传图片时自动调整方向。
图片管理系统中批量处理图片方向。

示例代码

以下是一个使用JavaScript和exif-js库来读取图片EXIF数据并判断旋转角度的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Rotation Detection</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
</head>
<body>

<input type="file" id="inputImage" accept="image/*">
<img id="previewImage" alt="Preview">

<script>
document.getElementById('inputImage').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        EXIF.getData(file, function() {
            var orientation = EXIF.getTag(this, 'Orientation');
            console.log('Orientation:', orientation);
            // 根据orientation值处理图片旋转
            switch (orientation) {
                case 3:
                    rotateImage(180);
                    break;
                case 6:
                    rotateImage(90);
                    break;
                case 8:
                    rotateImage(270);
                    break;
                default:
                    // 不需要旋转
                    break;
            }
        });
    }
});

function rotateImage(degrees) {
    var image = document.getElementById('previewImage');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = image.width;
    var height = image.height;

    // 设置canvas尺寸为旋转后的尺寸
    canvas.width = height;
    canvas.height = width;

    // 旋转画布
    ctx.translate(height / 2, width / 2);
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -width / 2, -height / 2);

    // 将旋转后的图像显示在页面上
    image.src = canvas.toDataURL();
}
</script>

</body>
</html>