web获取照片EXIF信息(例如:拍照方向相机设备型号拍摄时间ISO 感光度GPS 地理位置等数据)

Posted Love丶伊卡洛斯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web获取照片EXIF信息(例如:拍照方向相机设备型号拍摄时间ISO 感光度GPS 地理位置等数据)相关的知识,希望对你有一定的参考价值。

前言

插件:Exif.js
插件文档:http://code.ciaoca.com/javascript/exif-js/
简介:可交换图像文件格式(英语:Exchangeable image file format,官方简称Exif),是专门为数码相机的照片设定的,可以记录数码照片的属性信息和拍摄数据。

具体使用

1、手机打开相应功能,拍照时开启定位

以小米10为例。打开相机,进入设置。
在这里插入图片描述
在这里插入图片描述
打开 “保存地理位置信息”的功能,这个功能默认是开启的
在这里插入图片描述
然后拍照,原图传到电脑!!!(原图!!!)

2、运行exif.html

复制代码,写入exif.html文件中
在这里插入图片描述
效果如下:(ps:因为插件用的在线加载,所以要确保能够正常上网)
在这里插入图片描述

3、根据提示上传图片,获取信息

具体信息含义可以往下翻页查看
在这里插入图片描述
图片转自官方文档 http://code.ciaoca.com/javascript/exif-js/
在这里插入图片描述

4、GPS信息获取

在这里插入图片描述
经纬度的3个值分别是度分秒
转为度的换算公式为 度 + 分/60 + 秒/3600
然后网上找个经纬度转地址的网站,例http://www.toolzl.com/tools/gps.html
在这里插入图片描述

代码 exif.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>
        exif demo
    </title>
    <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
    <style>
        #img {
            height: 500px;
            width: 500px;
        }
    </style>
</head>

<body>
    <span>使用方式,选择图片文件,图片预览图会显示在下方。点击“获取数据”,EXIF信息则会显示在文本区域内。具体信息含义可以参考下方的说明。</span>
    <a href="http://code.ciaoca.com/javascript/exif-js/">exif.js官方文档</a>
    <br>
    <input type="file" id='imgInput' accept="image/*">
    <button onclick="getExifInfo()">获取数据</button>
    <br>
    <img src="" id="img" />
    <textarea id="dataArea" rows="50" cols="100"></textarea>

    <h2>EXIF 标识 —— 转自官方文档</h2>
    <div class="example">
        <table class="manual_table">
            <thead>
                <tr>
                    <th width="240">名称</th>
                    <th>说明</th>
                </tr>
            </thead>

            <!-- version tags -->
            <tr>
                <td>ExifVersion</td>
                <td>Exif 版本</td>
            </tr>
            <tr>
                <td>FlashPixVersion</td>
                <td>FlashPix 版本</td>
            </tr>

            <!-- colorspace tags -->
            <tr>
                <td>ColorSpace</td>
                <td>色域、色彩空间</td>
            </tr>
            <tr>
                <td>PixelXDimension</td>
                <td>图像的有效宽度</td>
            </tr>
            <tr>
                <td>PixelYDimension</td>
                <td>图像的有效高度</td>
            </tr>
            <tr>
                <td>ComponentsConfiguration</td>
                <td>图像构造</td>
            </tr>
            <tr>
                <td>CompressedBitsPerPixel</td>
                <td>压缩时每像素色彩位</td>
            </tr>

            <!-- user information -->
            <tr>
                <td>MakerNote</td>
                <td>制造商设置的信息</td>
            </tr>
            <tr>
                <td>UserComment</td>
                <td>用户评论</td>
            </tr>

            <!-- related file -->
            <tr>
                <td>RelatedSoundFile</td>
                <td>关联的声音文件</td>
            </tr>

            <!-- date and time -->
            <tr>
                <td>DateTimeOriginal</td>
                <td>创建时间</td>
            </tr>
            <tr>
                <td>DateTimeDigitized</td>
                <td>数字化创建时间</td>
            </tr>
            <tr>
                <td>SubsecTime</td>
                <td>日期时间(秒)</td>
            </tr>
            <tr>
                <td>SubsecTimeOriginal</td>
                <td>原始日期时间(秒)</td>
            </tr>
            <tr>
                <td>SubsecTimeDigitized</td>
                <td>原始日期时间数字化(秒)</td>
            </tr>

            <!-- picture-taking conditions -->
            <tr>
                <td>ExposureTime</td>
                <td>曝光时间</td>
            </tr>
            <tr>
                <td>FNumber</td>
                <td>光圈值</td>
            </tr>
            <tr>
                <td>ExposureProgram</td>
                <td>曝光程序</td>
            </tr>
            <tr>
                <td>SpectralSensitivity</td>
                <td>光谱灵敏度</td>
            </tr>
            <tr>
                <td>ISOSpeedRatings</td>
                <td>感光度</td>
            </tr>
            <tr>
                <td>OECF</td>
                <td>光电转换功能</td>
            </tr>
            <tr>
                <td>ShutterSpeedValue</td>
                <td>快门速度</td>
            </tr>
            <tr>
                <td>ApertureValue</td>
                <td>镜头光圈</td>
            </tr>
            <tr>
                <td>BrightnessValue</td>
                <td>亮度</td>
            </tr>
            <tr>
                <td>ExposureBiasValue</td>
                <td>曝光补偿</td>
            </tr>
            <tr>
                <td>MaxApertureValue</td>
                <td>最大光圈</td>
            </tr>
            <tr>
                <td>SubjectDistance</td>
                <td>物距</td>
            </tr>
            <tr>
                <td>MeteringMode</td>
                <td>测光方式</td>
            </tr>
            <tr>
                <td>Lightsource</td>
                <td>光源</td>
            </tr>
            <tr>
                <td>Flash</td>
                <td>闪光灯</td>
            </tr>
            <tr>
                <td>SubjectArea</td>
                <td>主体区域</td>
            </tr>
            <tr>
                <td>FocalLength</td>
                <td>焦距</td>
            </tr>
            <tr>
                <td>FlashEnergy</td>
                <td>闪光灯强度</td>
            </tr>
            <tr>
                <td>SpatialFrequencyResponse</td>
                <td>空间频率反应</td>
            </tr>
            <tr>
                <td>FocalPlaneXResolution</td>
                <td>焦距平面X轴解析度</td>
            </tr>
            <tr>
                <td>FocalPlaneYResolution</td>
                <td>焦距平面Y轴解析度</td>
            </tr>
            <tr>
                <td>FocalPlaneResolutionUnit</td>
                <td>焦距平面解析度单位</td>
            </tr>
            <tr>
                <td>SubjectLocation</td>
                <td>主体位置</td>
            </tr>
            <tr>
                <td>ExposureIndex</td>
                <td>曝光指数</td>
            </tr>
            <tr>
                <td>SensingMethod</td>
                <td>图像传感器类型</td>
            </tr>
            <tr>
                <td>FileSource</td>
                <td>源文件</td>
            </tr>
            <tr>
                <td>SceneType</td>
                <td>场景类型(1 == 直接拍摄)</td>
            </tr>
            <tr>
                <td>CFAPattern</td>
                <td>CFA 模式</td>
            </tr>
            <tr>
                <td>CustomRendered</td>
                <td>自定义图像处理</td>
            </tr>
            <tr>
                <td>ExposureMode</td>
                <td>曝光模式</td>
            </tr>
            <tr>
                <td>WhiteBalance</td>
                <td>白平衡(1 == 自动,2 == 手动)</td>
            </tr>
            <tr>
                <td>DigitalZoomRation</td>
                <td>数字变焦</td>
            </tr>
            <tr>
                <td>FocalLengthIn35mmFilm</td>
                <td>35毫米胶片焦距</td>
            </tr>
            <tr>
                <td>SceneCaptureType</td>
                <td>场景拍摄类型</td>
            </tr>
            <tr>
                <td>GainControl</td>
                <td>场景控制</td>
            </tr>
            <tr>
                <td>Contrast</td>
                <td>对比度</td>
            </tr解决ios手机上传竖拍照片旋转90度的问题

Exif.js 读取图像的元数据

Exif.js读取图像的元数据

设置 Android 照片 EXIF 方向

Exif.js 读取图像的元数据

使用PHP获取图像文件的EXIF信息