vue中使用exif-js获取照片信息

安装 (exif官方地址

yarn add exif-js

vue页面内调用

<template>
  <div>
    <div>
      <img id="img1" src="../../src/assets/images/11.jpg">
    </div>
    <div id="showInfo"></div>
  </div>
</template>
import EXIF from 'exif-js'
export default {
  ...
  mounted () {
    this.getOrientation ()
  },
  methods: {
    // 获取图片方向值
    getOrientation () {
      window.onload = () => {
        var img1 = document.getElementById('img1')
            EXIF.getData(img1, function() {
            var make = EXIF.getTag(this, 'Make')  // 手机品牌
            var model = EXIF.getTag(this, 'Model') // 手机型号
            var orientation = EXIF.getTag(this, 'Orientation') // 图片方向
            var showInfo = document.getElementById('showInfo')
            showInfo.innerHTML = `${make} ${model} ${orientation}`
        })
      }
    }
  }
}

当我们拿到手机品牌、型号还有手机方向后,就可以做一些我们想要做的事情了。

API 方法

EXIF.getData(img, callback) 获取图像的数据

能兼容尚未支持提供 EXIF 数据的浏览器获取到元数据。

EXIF.getTag(img, tag)   获取图像的某个数据
EXIF.getAllTags(img)    获取图像的全部数据,值以对象的方式返回
EXIF.pretty(img)    获取图像的全部数据,值以字符串的方式返回

exif相关:

ExifVersion Exif 版本
FlashPixVersion FlashPix 版本
ColorSpace  色域、色彩空间
PixelXDimension 图像的有效宽度
PixelYDimension 图像的有效高度
ComponentsConfiguration 图像构造
CompressedBitsPerPixel  压缩时每像素色彩位
MakerNote   制造商设置的信息
UserComment 用户评论
RelatedSoundFile    关联的声音文件
DateTimeOriginal    创建时间
DateTimeDigitized   数字化创建时间
SubsecTime  日期时间(秒)
SubsecTimeOriginal  原始日期时间(秒)
SubsecTimeDigitized 原始日期时间数字化(秒)
ExposureTime    曝光时间
FNumber 光圈值
ExposureProgram 曝光程序
SpectralSensitivity 光谱灵敏度
ISOSpeedRatings 感光度
OECF    光电转换功能
ShutterSpeedValue   快门速度
ApertureValue   镜头光圈
BrightnessValue 亮度
ExposureBiasValue   曝光补偿
MaxApertureValue    最大光圈
SubjectDistance 物距
MeteringMode    测光方式
Lightsource 光源
Flash   闪光灯
SubjectArea 主体区域
FocalLength 焦距
FlashEnergy 闪光灯强度
SpatialFrequencyResponse    空间频率反应
FocalPlaneXResolution   焦距平面X轴解析度
FocalPlaneYResolution   焦距平面Y轴解析度
FocalPlaneResolutionUnit    焦距平面解析度单位
SubjectLocation 主体位置
ExposureIndex   曝光指数
SensingMethod   图像传感器类型
FileSource  源文件
SceneType   场景类型(1 == 直接拍摄)
CFAPattern  CFA 模式
CustomRendered  自定义图像处理
ExposureMode    曝光模式
WhiteBalance    白平衡(1 == 自动,2 == 手动)
DigitalZoomRation   数字变焦
FocalLengthIn35mmFilm   35毫米胶片焦距
SceneCaptureType    场景拍摄类型
GainControl 场景控制
Contrast    对比度
Saturation  饱和度
Sharpness   锐度
DeviceSettingDescription    设备设定描述
SubjectDistanceRange    主体距离范围
InteroperabilityIFDPointer  
ImageUniqueID   图像唯一ID

Tiff 相关:

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

GPS 相关:

GPSVersionID    GPS 版本
GPSLatitudeRef  南北纬
GPSLatitude 纬度
GPSLongitudeRef 东西经
GPSLongitude    经度
GPSAltitudeRef  海拔参照值
GPSAltitude 海拔
GPSTimeStamp    GPS 时间戳
GPSSatellites   测量的卫星
GPSStatus   接收器状态
GPSMeasureMode  测量模式
GPSDOP  测量精度
GPSSpeedRef 速度单位
GPSSpeed    GPS 接收器速度
GPSTrackRef 移动方位参照
GPSTrack    移动方位
GPSImgDirectionRef  图像方位参照
GPSImgDirection 图像方位
GPSMapDatum 地理测量资料
GPSDestLatitudeRef  目标纬度参照
GPSDestLatitude 目标纬度
GPSDestLongitudeRef 目标经度参照
GPSDestLongitude    目标经度
GPSDestBearingRef   目标方位参照
GPSDestBearing  目标方位
GPSDestDistanceRef  目标距离参照
GPSDestDistance 目标距离
GPSProcessingMethod GPS 处理方法名
GPSAreaInformation  GPS 区功能变数名
GPSDateStamp    GPS 日期
GPSDifferential GPS 修正
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容