基于EXIF在Chrome中将照片从文件绘制到画布的旋转

基础概念

EXIF（Exchangeable Image File Format）是一种存储在图像文件中的元数据格式，包含了关于图像的拍摄设备、设置和时间等信息。其中，EXIF信息中包含了一个方向标签（Orientation Tag），用于指示图像的正确方向。这个标签的值从1到8，分别表示不同的旋转和翻转状态。

类型

EXIF方向标签有以下几种类型：

1 (正常)：图像正常，无旋转或翻转。
3 (180度旋转)：图像旋转180度。
6 (顺时针90度旋转)：图像顺时针旋转90度。
8 (逆时针90度旋转)：图像逆时针旋转90度。
2 (水平翻转)：图像水平翻转。
4 (水平翻转后180度旋转)：图像水平翻转后再旋转180度。
5 (水平翻转后逆时针90度旋转)：图像水平翻转后再逆时针旋转90度。
7 (水平翻转后顺时针90度旋转)：图像水平翻转后再顺时针旋转90度。

应用场景

在Web开发中，特别是在使用HTML5 Canvas进行图像处理时，读取和应用EXIF方向标签是非常有用的。例如，用户上传的照片可能因为设备的不同而方向不一致，通过读取EXIF信息并应用正确的旋转，可以确保图像在网页上正确显示。

问题与解决方法

在Chrome浏览器中，将照片从文件绘制到Canvas时，可能会遇到图像方向不正确的问题。这是因为浏览器默认不会自动应用EXIF方向标签。以下是一个解决方案：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EXIF Orientation in Canvas</title>
</head>
<body>
    <input type="file" id="imageUpload" accept="image/*">
    <canvas id="canvas"></canvas>

    <script>
        document.getElementById('imageUpload').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) return;

            const img = new Image();
            img.src = URL.createObjectURL(file);

            img.onload = function() {
                const canvas = document.getElementById('canvas');
                const ctx = canvas.getContext('2d');

                EXIF.getData(img, function() {
                    const orientation = EXIF.getTag(this, 'Orientation');
                    let width = img.width;
                    let height = img.height;

                    switch (orientation) {
                        case 3:
                            ctx.rotate(Math.PI);
                            break;
                        case 6:
                            ctx.rotate(Math.PI / 2);
                            width = img.height;
                            height = img.width;
                            break;
                        case 8:
                            ctx.rotate(-Math.PI / 2);
                            width = img.height;
                            height = img.width;
                            break;
                    }

                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0, width, height);
                });
            };
        });
    </script>
</body>
</html>