デジカメ写真の向きをCSSの回転に置き換える。exif orientation を transform へ

image magck で画像回転させるとファイルが増えて面倒だった。

convert コマンドで写真を回転させると、ファイルの管理が面倒だったのになった。

画像を回転させるのに、CSS transform を使えばいいんじゃないかと。

Exif情報から、Orientationを抜き出して、CSSトランスフォームをかけてしまえばいい気がした。

画像から、EXIF 情報を抜き出す

identify を使って、Exif情報を見ることが出来る。

identify -format " \'{ 
 \"lat\" : \"%[Exif:GPSLatitude]\" ,
 \"lon\" : \"%[Exif:GPSLongitude]\" ,
 \"lat_ref\" : \"%[Exif:GPSLatitudeRef]\",
 \"lon_ref\" : \"%[Exif:GPSLongitudeRef]\",
 \"orientation\" : \"%[exif:Orientation]\" 
 }\' \n"    IMG_1234.jpg

ただ、これはとても面倒くさいので、

image_exif.sh

標準入力や、引数から取るように変えておいた。

path=''
if [ -p /dev/stdin ] ; then
  path=$(cat -)
else
  path=$1
fi


identify -format " \'{ \"lat\" : \"%[Exif:GPSLatitude]\" , \"lon\" : \"%[Exif:GPSLongitude]\" ,  \"lat_ref\" : \"%[Exif:GPSLatitudeRef]\", \"lon_ref\" : \"%[Exif:GPSLongitudeRef]\", \"orientation\" : \"%[exif:Orientation]\" , \"path\" : \"$path\"}\' \n"   "$path"

これで、画像のGPS情報や、写真の向きを取り出すことが出来て便利になった。

向きを変換するCSSを書き出す

orientation 情報を使って、次のようにする。

    function exif_orientation_to_css(orientation){
    style="";
    switch( orientation ){
      case 0: //未定義
        break;
      case 1: //通常
        style = "rotateX(  0deg) rotateY(  0deg) rotateZ( 0deg)" 
        break;
      case 2: //左右反転
        style = "rotateX(  0deg) rotateY(180deg) rotateZ( 0deg)" 
        break;
      case 3: //180°回転
        style = "rotateX(  0deg) rotateY(  0deg) rotateZ( 180deg)" 
        break;
      case 4: //上下反転
        style = "rotateX(180deg) rotateY(  0deg) rotateZ( 0deg)" 
        break;
      case 5: //反時計回りに90°回転 上下反転
        style = "rotateX(180deg) rotateY(  0deg) rotateZ( -90deg)" 
        break;
      case 6: //時計回りに90°回転
        style = "rotateX(  0deg) rotateY(  0deg) rotateZ( 90deg)" 
        break;
      case 7: //時計回りに90°回転 上下反転
        style = "rotateX(180deg) rotateY(  0deg) rotateZ( 90deg)" 
        break;
      case 8: //反時計回りに90°回転
        style = "rotateX(  0deg) rotateY(  0deg) rotateZ( -90deg)" 
        break;
    }
    return style;
    }

実行結果

takuya@rena:~/Desktop$ node untitled.js
{"orientation":0,"style":""}
{"orientation":1,"style":"rotateX(  0deg) rotateY(  0deg) rotateZ( 0deg)"}
{"orientation":2,"style":"rotateX(  0deg) rotateY(180deg) rotateZ( 0deg)"}
{"orientation":3,"style":"rotateX(  0deg) rotateY(  0deg) rotateZ( 180deg)"}
{"orientation":4,"style":"rotateX(180deg) rotateY(  0deg) rotateZ( 0deg)"}
{"orientation":5,"style":"rotateX(180deg) rotateY(  0deg) rotateZ( -90deg)"}
{"orientation":6,"style":"rotateX(  0deg) rotateY(  0deg) rotateZ( 90deg)"}
{"orientation":7,"style":"rotateX(180deg) rotateY(  0deg) rotateZ( 90deg)"}
{"orientation":8,"style":"rotateX(  0deg) rotateY(  0deg) rotateZ( -90deg)"}
{"orientation":9,"style":""}