获取 img 元素的 exif 方向并相应地分配类答案

【问题标题】：Getting exif orientation of img element and assigning class accordingly获取 img 元素的 exif 方向并相应地分配类
【发布时间】：2016-11-20 19:46:48
【问题描述】：

我有一个图像元素，我需要根据 exif 方向更改图像的旋转。我只需要使用 javascript 即可。

以下是css类：

.image_up {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.image_down {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.image_left {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

这是将css分配给图像文件的逻辑：

{
    case 3: // 180 rotate left
        document.getElementById("user-avatar").className = "image_up";
        break;
    case 6: // 90 rotate right
        document.getElementById("user-avatar").className = "image_down";
        break;
    case 8: // 90 rotate left
        document.getElementById("user-avatar").className = "image_left";
        break;
}

我的问题是在显示图像之前获取图像文件的 exif 数据并选择正确的类

【问题讨论】：

Github有一个用于提取exif信息的javascript库github.com/exif-js/exif-js
是的，我正在使用该库，我需要在本地运行，但它无法正常工作。仅在从服务器运行代码时才有效吗？
文件在浏览器中运行。确保您有正确的 js 文件路径。您可以查看控制台错误面板（在浏览器中按 F12 以调出开发人员工具面板）。代码中的任何错误都应显示在控制台面板中。

标签： javascript html css orientation exif

【解决方案1】：

如果你使用的是 vue.js 您可以简单地使用这个vue-img-orientation-changer 来修复不正确的img 方向。

vue-img-orientation-changer 是一个 vue 指令插件。

查看示例： Fix Img Orientation

Github 存储库：vue-img-orientation-changer

【讨论】：