web获取照片EXIF信息（例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据）_html怎么获取手机拍照时的时间-程序员宅基地

前言

插件：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>
            <tr>
                <td>Saturation</td>
                <td>饱和度</td>
            </tr>
            <tr>
                <td>Sharpness</td>
                <td>锐度</td>
            </tr>
            <tr>
                <td>DeviceSettingDescription</td>
                <td>设备设定描述</td>
            </tr>
            <tr>
                <td>SubjectDistanceRange</td>
                <td>主体距离范围</td>
            </tr>

            <!-- other tags -->
            <tr>
                <td>InteroperabilityIFDPointer</td>
                <td></td>
            </tr>
            <tr>
                <td>ImageUniqueID</td>
                <td>图像唯一ID</td>
            </tr>
        </table>

        <table class="manual_table">
            <caption>Tiff 相关</caption>
            <thead>
                <tr>
                    <th width="240">名称</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tr>
                <td>ImageWidth</td>
                <td>图像宽度</td>
            </tr>
            <tr>
                <td>ImageHeight</td>
                <td>图像高度</td>
            </tr>
            <tr>
                <td>BitsPerSample</td>
                <td>比特采样率</td>
            </tr>
            <tr>
                <td>Compression</td>
                <td>压缩方法</td>
            </tr>
            <tr>
                <td>PhotometricInterpretation</td>
                <td>像素合成</td>
            </tr>
            <tr>
                <td>Orientation</td>
                <td>拍摄方向</td>
            </tr>
            <tr>
                <td>SamplesPerPixel</td>
                <td>像素数</td>
            </tr>
            <tr>
                <td>PlanarConfiguration</td>
                <td>数据排列</td>
            </tr>
            <tr>
                <td>YCbCrSubSampling</td>
                <td>色相抽样比率</td>
            </tr>
            <tr>
                <td>YCbCrPositioning</td>
                <td>色相配置</td>
            </tr>
            <tr>
                <td>XResolution</td>
                <td>X方向分辨率</td>
            </tr>
            <tr>
                <td>YResolution</td>
                <td>Y方向分辨率</td>
            </tr>
            <tr>
                <td>ResolutionUnit</td>
                <td>分辨率单位</td>
            </tr>
            <tr>
                <td>StripOffsets</td>
                <td>图像资料位置</td>
            </tr>
            <tr>
                <td>RowsPerStrip</td>
                <td>每带行数</td>
            </tr>
            <tr>
                <td>StripByteCounts</td>
                <td>每压缩带比特数</td>
            </tr>
            <tr>
                <td>JPEGInterchangeFormat</td>
                <td>JPEG SOI 偏移量</td>
            </tr>
            <tr>
                <td>JPEGInterchangeFormatLength</td>
                <td>JPEG 比特数</td>
            </tr>
            <tr>
                <td>TransferFunction</td>
                <td>转移功能</td>
            </tr>
            <tr>
                <td>WhitePoint</td>
                <td>白点色度</td>
            </tr>
            <tr>
                <td>PrimaryChromaticities</td>
                <td>主要色度</td>
            </tr>
            <tr>
                <td>YCbCrCoefficients</td>
                <td>颜色空间转换矩阵系数</td>
            </tr>
            <tr>
                <td>ReferenceBlackWhite</td>
                <td>黑白参照值</td>
            </tr>
            <tr>
                <td>DateTime</td>
                <td>日期和时间</td>
            </tr>
            <tr>
                <td>ImageDescription</td>
                <td>图像描述、来源</td>
            </tr>
            <tr>
                <td>Make</td>
                <td>生产者</td>
            </tr>
            <tr>
                <td>Model</td>
                <td>型号</td>
            </tr>
            <tr>
                <td>Software</td>
                <td>软件</td>
            </tr>
            <tr>
                <td>Artist</td>
                <td>作者</td>
            </tr>
            <tr>
                <td>Copyright</td>
                <td>版权信息</td>
            </tr>
        </table>

        <table class="manual_table">
            <caption>GPS 相关</caption>
            <thead>
                <tr>
                    <th width="240">名称</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tr>
                <td>GPSVersionID</td>
                <td>GPS 版本</td>
            </tr>
            <tr>
                <td>GPSLatitudeRef</td>
                <td>南北纬</td>
            </tr>
            <tr>
                <td>GPSLatitude</td>
                <td>纬度</td>
            </tr>
            <tr>
                <td>GPSLongitudeRef</td>
                <td>东西经</td>
            </tr>
            <tr>
                <td>GPSLongitude</td>
                <td>经度</td>
            </tr>
            <tr>
                <td>GPSAltitudeRef</td>
                <td>海拔参照值</td>
            </tr>
            <tr>
                <td>GPSAltitude</td>
                <td>海拔</td>
            </tr>
            <tr>
                <td>GPSTimeStamp</td>
                <td>GPS 时间戳</td>
            </tr>
            <tr>
                <td>GPSSatellites</td>
                <td>测量的卫星</td>
            </tr>
            <tr>
                <td>GPSStatus</td>
                <td>接收器状态</td>
            </tr>
            <tr>
                <td>GPSMeasureMode</td>
                <td>测量模式</td>
            </tr>
            <tr>
                <td>GPSDOP</td>
                <td>测量精度</td>
            </tr>
            <tr>
                <td>GPSSpeedRef</td>
                <td>速度单位</td>
            </tr>
            <tr>
                <td>GPSSpeed</td>
                <td>GPS 接收器速度</td>
            </tr>
            <tr>
                <td>GPSTrackRef</td>
                <td>移动方位参照</td>
            </tr>
            <tr>
                <td>GPSTrack</td>
                <td>移动方位</td>
            </tr>
            <tr>
                <td>GPSImgDirectionRef</td>
                <td>图像方位参照</td>
            </tr>
            <tr>
                <td>GPSImgDirection</td>
                <td>图像方位</td>
            </tr>
            <tr>
                <td>GPSMapDatum</td>
                <td>地理测量资料</td>
            </tr>
            <tr>
                <td>GPSDestLatitudeRef</td>
                <td>目标纬度参照</td>
            </tr>
            <tr>
                <td>GPSDestLatitude</td>
                <td>目标纬度</td>
            </tr>
            <tr>
                <td>GPSDestLongitudeRef</td>
                <td>目标经度参照</td>
            </tr>
            <tr>
                <td>GPSDestLongitude</td>
                <td>目标经度</td>
            </tr>
            <tr>
                <td>GPSDestBearingRef</td>
                <td>目标方位参照</td>
            </tr>
            <tr>
                <td>GPSDestBearing</td>
                <td>目标方位</td>
            </tr>
            <tr>
                <td>GPSDestDistanceRef</td>
                <td>目标距离参照</td>
            </tr>
            <tr>
                <td>GPSDestDistance</td>
                <td>目标距离</td>
            </tr>
            <tr>
                <td>GPSProcessingMethod</td>
                <td>GPS 处理方法名</td>
            </tr>
            <tr>
                <td>GPSAreaInformation</td>
                <td>GPS 区功能变数名</td>
            </tr>
            <tr>
                <td>GPSDateStamp</td>
                <td>GPS 日期</td>
            </tr>
            <tr>
                <td>GPSDifferential</td>
                <td>GPS 修正</td>
            </tr>
        </table>
</body>
<script>
    function getExifInfo() {
      
        console.log("执行...");
        EXIF.getData(document.getElementById('img'), function () {
      
            document.getElementById('dataArea').innerText = JSON.stringify(EXIF.getAllTags(this), null, "\t");
            console.log(JSON.stringify(EXIF.getAllTags(this), null, "\t"));
        });
    }

    // 参考：https://blog.csdn.net/qq_38789941/article/details/95309081
    document.querySelector('#imgInput').onchange = function () {
      
        if (this.files.length) {
      
            let file = this.files[0];
            let reader = new FileReader();
            //新建 FileReader 对象
            reader.onload = function () {
      
                // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
                document.querySelector('#img').src = this.result;
                //document.querySelector('#text').innerHTML = this.result;
            };
            // 设置以什么方式读取文件，这里以base64方式
            reader.readAsDataURL(file);
        }
    }
</script>

</html>

本文链接：https://blog.csdn.net/Ikaros_521/article/details/117820751

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

[论文阅读]MV3D——用于自动驾驶的多视角3D目标检测网络-程序员宅基地

文章浏览阅读1.4w次。MV3D论文阅读_mv3d

Xcode清除缓存、清理多余证书-程序员宅基地

文章浏览阅读210次。Xcode清除缓存、清理多余证书 1、删除Xcode中多余的证书provisioning profile 手动删除： Xcode6 provisioning profile path： ~/Library/MobileDevice/Provisioning Profiles2、清理Xcode编译项目产生的缓存垃圾（Xcode永久了，会产生很多项目编译缓

DSP320C6000的指令列表汇集__mpysp2dp-程序员宅基地

文章浏览阅读8.2k次，点赞3次，收藏71次。TMS320C6000产品是美国TI公司于1997年推出的dsp芯片，该DSP芯片定点、浮点兼容，其中，定点系列是TMS320C62xx系列，浮点系列是TMS320C67xx系列，2000年3月，TI发布新的C64xx内核，主频为1.1GHz，处理速度9000MIPS，在图像处理和流媒体领域得到了广泛的应用。C6000片内有8个并行的处理单元，分为相同的两组。DSP的体系结构采用超长指令字（v...__mpysp2dp

pytorch保存模型pth_浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式-程序员宅基地

文章浏览阅读1k次。我们经常会看到后缀名为.pt, .pth, .pkl的pytorch模型文件，这几种模型文件在格式上有什么区别吗？其实它们并不是在格式上有区别，只是后缀不同而已(仅此而已)，在用torch.save()函数保存模型文件时，各人有不同的喜好，有些人喜欢用.pt后缀，有些人喜欢用.pth或.pkl.用相同的torch.save()语句保存出来的模型文件没有什么不同。在pytorch官方的文档/代码里，..._模型保存为pth

什么是ACM？怎么写acm代码- java 笔试acm常见类型处理。-程序员宅基地

文章浏览阅读1.3k次。笔试常见的三种类型的acm处理string array list

P2P下载技术-BT协议与Magnet磁力链接_torrent magnet-程序员宅基地

文章浏览阅读1.6w次，点赞19次，收藏44次。P2P下载技术-BT协议与Magnet磁力链接前言传统服务器-客户端文件下载P2P下载最早的应用-NapsterBT-BitTorrentbt的工作原理Magnet磁力链接前言我们在互联网上下载文件时大概几种方式：FTP、HTTP、BT、Magnet磁力链等。浏览器会直接支持FTP和HTTP下载，BT和磁力链下载一般需要专用的下载软件的支持。传统服务器-客户端文件下载FTP，全称File Transfer Protocol，即文件传输协议，顾名思义，它就是一个提供文件传输功能的协议。通过该协议下载_torrent magnet

随便推点

Stm32CubeIDE设置补全快捷键和主题_cubeide快捷键设置-程序员宅基地

文章浏览阅读8.2k次，点赞8次，收藏32次。Stm32CubeIDE设置补全快捷键和主题stm32CubeIde的设置，省的自己忘记了。一、主题设置提示：这里可以添加要学的内容例如：1、 help->Eclipse Market->输入"Devstyle"查找主题插件->install安装2、窗口->首选项找到主题3、按照如下设置完成后会提示重启，重启后效果如下所示二、补全设置用于设置代码的自动补全搜索: key->content assist默认的补全快捷键时alt+/，这里我改成双击两次_cubeide快捷键设置