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

技术标签: web  前端  exif  

前言

插件: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>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Ikaros_521/article/details/117820751

智能推荐

RK3399运行瑞芯微官方yolov5 C++代码_yolov9 rk3399-程序员宅基地

文章浏览阅读5.8k次。RK3399编译调试瑞芯微官方yolov5 C++代码yolov5 C++代码代码地址https://github.com/rockchip-linux/rknpu.git /rknn/rknn_api/example/rknn_yolov5_demorknn 模型使用rknpu/rknn/rknn_api/examples)/rknn_yolov5_demo/model/rk180x/yolov5s_relu_rk180x_out_opt.rknn 地址yolov5s_relu_rk180_yolov9 rk3399

mmdetection3d 源码学习 mvxnet(多模态融合)-程序员宅基地

文章浏览阅读5k次。mmdetection3d 源码学习 mvxnet(多模态融合)配置文件dv_mvx-fpn_second_secfpn_adamw_2x8_80e_kitti-3d-3class.py模型# model settingsvoxel_size = [0.05, 0.05, 0.1]point_cloud_range = [0, -40, -3, 70.4, 40, 1]##模型 图像:主干 ResNet,neck FPN;点云:voxel编码,主干second(稀疏编码),neck secon_mvxnet

C++操作Mysql数据库/Linux下_c++ 操作mysql数据库-程序员宅基地

文章浏览阅读3.3k次,点赞14次,收藏36次。想用C++写项目,数据库是必须的,所以这两天学了一下C++操作Mysql数据库的方法。也没有什么教程,就是在网上搜的知识,下面汇总一下。 连接MySQL数据库有两种方法:第一种是使用ADO连接,不过这种只适合Windows平台;第二种是使用MySQL自己的C API函数连接数据库。我是在Linux平台下开发,所以就采用第二种方法,有很多Api函数,但是常用的就几个,我也是就用到其中的几个。API函_c++ 操作mysql数据库

在Watir中调用JavaScript脚本_watir执行脚本-程序员宅基地

文章浏览阅读3.9k次。如何在Watir中调用JavaScript脚本?下面的脚本实现了此功能,主要原理是通过IE访问Document,再访问parentWindow,最终还是由IE在执行JavaScript脚本: require watir#定义调用JS的类方法class Watir::IE def run_script(js) ie.Document.parentWindow.execS_watir执行脚本

为什么不能使用Thread.stop()方法?_禁止使用thread.stop()来终止线程-程序员宅基地

文章浏览阅读2.1k次。从SUN的官方文档可以得知,调用Thread.stop()方法是不安全的,这是因为当调用Thread.stop()方法时,会发生下面两件事:1. 即刻抛出ThreadDeath异常,在线程的run()方法内,任何一点都有可能抛出ThreadDeath Error,包括在catch或finally语句中。2. 释放该线程所持有的所有的锁 当线程抛出ThreadDeath异常时,会导致_禁止使用thread.stop()来终止线程

神秘魔术动作能量冲击波特效音效Arcane Forces第一套 MAGIC - ARCANE FORCES DESIGNED_magic – arcane forces-程序员宅基地

文章浏览阅读222次。神秘魔术动作能量冲击波特效音效Arcane Forces第一套 MAGIC - ARCANE FORCES DESIGNED原文地址:https://www.aeziyuan.com/t-20646.html文件格式:.WAV文件大小:1.26 GB(解压包大小)文件数量:124音频码率:96kHz, 24-bit音效适用于任何音/视频后期编辑软件,直接导入即可使用包含:酸,奥术,障壁,呼吸,增益,诅咒,减伤,神圣,电,能量,火,玻璃,冰,冲击,光,液体,金属,加工,抛射,隆隆声,序,召唤,._magic – arcane forces

随便推点

Linux压缩解压tar.gz和zip包命令汇总_加压gz包命令-程序员宅基地

文章浏览阅读3.5k次。Linux压缩解压tar.gz和zip包命令汇总_加压gz包命令

c语言基础: L1-016 查验身份证_c语言检验身份照-程序员宅基地

文章浏览阅读1.5k次。一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下:首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2};然后将计算的和对11取模得到值Z;最后按照以下关系对应Z值与校验码M现在给定一些身份证号码,请你验证校验码的有效性,并输出有问题的号码。_c语言检验身份照

CI867AK01丨Modbus TCP接口模件丨3BSE092689R1-程序员宅基地

文章浏览阅读450次,点赞4次,收藏6次。CI867AK013BSE092689R1Modbus TCP接口模件模块,通过无线或有线的方式,实现设备之间的数据传输和通信连接。

PySide2入门--PySide2介绍与配置-程序员宅基地

文章浏览阅读2w次,点赞16次,收藏96次。前言 因为有对GUI界面开发的需求,我前些阵子接触过Qt,一套著名的跨平台的C++图形界面框架。Qt开发最有效的Qt creator,跨平台且集成多款工具,上手体验十分友好。但是,由于C++导入第三方库相对麻烦,而且现有的代码都基于Python实现。此处将介绍Qt相应的Python模块——PySide。为什么不选择PyQt? PySide2和PyQt5同样对应的Qt5框架,PyQt甚至要比PySide出现更早,社区更完备、中文文档更丰富。但是,值得注意的是:二者的许可证存在着差异。 PyQ_pyside2

Jupyter Notebook如何调试?JupyterLab作为DeBug调试工具及调试教程_jupyterlab怎么debug-程序员宅基地

文章浏览阅读2.9w次,点赞30次,收藏107次。引言xeus-python是2020年新出的Jupyter notebook调试工具,参考机器之心的文章首款 Jupyter 官方可视化 Debug 工具,JupyterLab 未来可默认支持 Debug安装过程安装JupyterLab 前端插件jupyter labextension install @jupyterlab/debugger安装xeus-python作为后端kernelconda install xeus-python -c conda-forge调试教程只要装好前端与_jupyterlab怎么debug

如何将xml转换为json_xml转json-程序员宅基地

文章浏览阅读3.8k次。<dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20160807</version> </dependency>导入 json-20160807.jar jar包 直接调用 XML.toJSONObject(“xml内容”) 就可以把XML._xml转json

推荐文章

热门文章

相关标签