竹炉山房

首先要感谢@fooleap发给我的极为给力的jQuery 实现显示图片 Exif 代码，解决了我十年来 😥 的一个夙愿：显示博客图片 Exif（什么是 Exif？）信息——以后再也不需要在图片的 title 属性里人肉输入用了什么设备了！

虽然从来没学过 jQuery，但好歹有十多年前可怜的一点 js 基础，加上百度，一晚上摸索着居然也搞出来了。

注意：以下代码实现的基础是图片托管于 Aliyun OSS 或 Qiniu 等。

1、将根据自己需求修订后的 jQuery 代码 yourjscode.js 上传至主题下 js 文件夹：

/* -------------------------------------------------
 * Description: New exif.js file. Just make it neat.
 * Edition:     v1.4
 * Time:        2018/11/18 23:46
 * Author:      https://synyan.net
 * ------------------------------------------------*/
window.$ = jQuery;
$(document).ready(function(){
$('.post-content img[src*="synyan.cn"]').each(function(){
    var _ = this; 
    var $el = $(this); 
    var displayinfo;
    if( _.src.toLowerCase().lastIndexOf('.jpg') )
        var index = _.src.toLowerCase().lastIndexOf('.jpg');
        else if( _.src.toLowerCase().lastIndexOf('.jpeg') )
        var index = _.src.toLowerCase().lastIndexOf('.jpeg');
    else
        return;
    var titleString = _.title;
    var titleCamera = false;
    if (titleString.indexOf("Camera") >= 0) titleCamera = true;
    if( index > -1 ){
        var exifUrl = _.src.slice(0, index)+'.jpg?x-oss-process=image/info';
        $.ajax({
            url: exifUrl,
            success: function (res) {
               var exif = res;
               var parse = function(attr, label){
               return !attr ? '' : ( label ? label + ' ' : '') + attr.value + ' ';
     }
     /* 情况1 */
     if (!!parse(exif.Make) && !!parse(exif.Model) && !!parse(exif.DateTimeOriginal)){
        /* 情况1.1 */
        var imgCameraOne = parse(exif.Model).replace("Canon","");
        var imgCameraOne = parse(exif.Model).replace("HTC","");
        var focalLengthInNumber = Math.round((eval(parse(exif.FocalLength,'')))*100)/100;
        var focalLengthIn35mmFilmOutput;
        var focalLengthIn35mmFilmNumber = eval(parse(exif.FocalLengthIn35mmFilm,''));
        var focalLenghtOutput;
     if (!focalLengthInNumber) {
        focalLenghtOutput = "";
        if (!focalLengthIn35mmFilmNumber)
           focalLengthIn35mmFilmOutput = "";
        else
           focalLengthIn35mmFilmOutput = " eqv " +　focalLengthIn35mmFilmNumber + "mm";
      }
      else {
           focalLenghtOutput = "·" + " f=" +　focalLengthInNumber + "mm";
           if (focalLengthIn35mmFilmNumber)
              focalLengthIn35mmFilmOutput = " eqv " +　focalLengthIn35mmFilmNumber + "mm";
           else {
              focalLengthIn35mmFilmOutput = "";
           }
           if (focalLengthInNumber == focalLengthIn35mmFilmNumber) {
              focalLenghtOutput = "";
              focalLengthIn35mmFilmOutput = "·" + " f=" +　focalLengthInNumber + "mm";
           }
           else;
       }
       var content = '<div class="exif-caption" exif-data="'
                   + parse(exif.Make, '')
                   + imgCameraOne
                   + parse(exif.LensModel,'·')
                   + parse(exif.DateTimeOriginal, '·')
                   + focalLenghtOutput
                   + focalLengthIn35mmFilmOutput
                   + '"></div>';
        }
       /* 情况2 */
        else if (!parse(exif.Make) || !parse(exif.Model) || !parse(exif.DateTimeOriginal)) {
             if (titleString && titleCamera) {
                var imgTitle = titleString;
                imgTitle = imgTitle.replace(/（Camera：/i, '');
                imgTitle = imgTitle.replace(/）/i, '');
                if (imgTitle.indexOf("+") >= 0) {
                    var imgTitleString = imgTitle.split("+");
                    var imgCamera = imgTitleString[0];
                    var imgLens = imgTitleString[1];
                    var imgFilm = imgTitleString[2];
                    var imgScanner = imgTitleString[3];
                if (!imgLens){
                    imgTitle = "" + imgCamera;
                }
                else if (!imgFilm) {
                    imgTitle = "" + imgCamera +"·" + imgLens;
                }
                else if (!imgScanner) {
                    imgTitle = "" + imgCamera +"·" + imgLens + "·" + imgFilm;
                }
                else {
                    imgTitle = "" + imgCamera +"·" + imgLens + "·" + imgFilm + "·" + imgScanner;
                }
          }
          else if(imgTitle.indexOf("+") < 0 && titleString.indexOf("Camera：") >=0){
               imgTitle = "" + imgTitle;
          }
          if (exif.DateTimeOriginal) {
               var content = '<div class="exif-caption" exif-data="'
                           + imgTitle
                           + parse(exif.DateTimeOriginal, '·')
                           + '"></div>';
          }
          /* 情况2.1 */
            if (!(exif.DateTimeOriginal)) {
                 /* 情况2.1.1 */
                 if ((exif.DateTime && !exif.DateTimeDigitized)) {
                     var content = '<div class="exif-caption" exif-data="'
                                 + imgTitle 
                                 + parse(exif.DateTime, '·')
                                 + '"></div>';
             }
             else if ((exif.DateTimeDigitized)) {
                 var content = '<div class="exif-caption" exif-data="'
                             + imgTitle
                             + parse(exif.DateTimeDigitized, '·')
                             + '"></div>';
             }
             else {
                 var content = '<div class="exif-caption" exif-data="'
                             + imgTitle
                             + '"></div>';
             }
           }
        }
        /* 情况3 */
        else {
             var content = '<div class="exif-caption" exif-data="'
                         + '　无Exif信息 '
                         + '"></div>';
        }
      }
      else;
      $(".post-content img").attr({title:""});
      $el.after(content);
      }
      })
     }
   })
})

2、在 Single.php 头部插入：

<script src="<?phpecho get_stylesheet_directory_uri() ?>/js/yourjscode.js"></script>

3、添加 css 代码（从 @fooleap 的博客扒下来的，同样也是修订了一番，最终符合 WordPress 的贴图规范，再次感谢 @fooleap）：

/* exif css */
.post-content .wp-caption .exif-caption:before{
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    content: attr(exif-data);
    display: block;
    position: absolute !important;
    top: 20px;
    left: 25px;
    right: 25px;
    background-color: black;
    color: white;
    font-size: 12px;
    line-height: 25px;
    height: 25px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}
.wp-caption:hover .exif-caption[exif-data]:before {
    opacity: .7;
}

4、Aliyun 开通 “跨域访问”。

大功告成！ 😉

2018 年 11 月 3 日

昨晚做得匆忙，开会抽空之余继续优化了一下代码：

• 删掉了无用的几行代码。
• 以前人肉输入的 title 属性也没浪费，加入判断语句，如果 Exif 为空或不全，则取出 title 标签中的部分文字，嵌入显示完整信息。

2018 年 11 月 4 日

发现存量图片显示 Exif 存在各种 bug，原代码越改越多越糊涂，改到后来已经不知道到底在写什么了。

于是静下心来列了一张代码结构表：

情况 1：
正常 Exif（标准是 Make/Model/DateTimeOriginal/FNumber 同时存在）。
	情况 1.1：
	若 Make 为 Canon/HTC，Model 中去除一个重复的 Canon/HTC 字样。

情况 2：
有 Exif 但 Exif 不全（标准是 Make/Model/DateTimeOriginal/FNumber 有一个不存在），或无 Exif，以人工输入的 title="（Camera：Make & Model + [LensModel] + [Film] + [Scanner]）"通过分割+号代替 Make/Model/LensModel 并添上其它属性。
	情况 2.1：
	若 DateTimeOriginal 不存在，则以 DateTime 显示修改时间。
		情况 2.1.1：
		若 DateTime 不存在，则不显示修改时间。
		情况 2.1.2：
		若 DateTimeDigitalized 存在，则以 DateTimeDigitalized 显示图片时间。
情况 3：
无 Exif，无 title，提示无 Exif 信息。

按照代码结构表重写一遍，清爽整洁多了。精简后的代码已更新至代码 1。

2020 年 4 月 14 日

针对 2018 年 11 月写的关于不具有 Exif 的图片（如：胶片扫描件）添加 title 属性并获取数据的方法，经过一年半来的实践，认为并不好……

以前人肉输入的 title 属性也没浪费，加入判断语句，如果 Exif 为空或不全，则取出 title 标签中的部分文字，嵌入显示完整信息。

尤其是 WordPress 将后台编辑器更新为古腾堡后，如果更新区块则会导致原有 title 全部遗失。另外今后也许第三方会出新的 Exif 解析工具，人肉添加 title 并后期调用的原始方法在实现了自己的历史价值后，应该丢入垃圾堆。推荐直接利用批量改图工具，为不具有原始 Exif 属性的图片添加 Exif 以达到一劳永逸的目的。相关改图工具包括（推荐度以数字排序）：

Mac：

1. ImageExifEditor
2. Exif Editor for Mac

Windows：

1. Photos Exif Editor
2. ExifTool
3. PowerExif
4. ExifDateEdit

Ubuntu：

1. jhead 库
2. libexif 库

（为啥没有封装好的软件包？都用 Linux 了还要啥 interface……）