「スマホで写真を投稿したら・・・ひっくり返って表示された!」
なんてことに出会ったことはありますか?
写真のデータの中には、写真の情報はもちろんですが、
どういう風に写真を撮ったのか、というデータも持っています。
-スマホを縦にして写真を撮ったのか、横にして写真を撮ったのか。
といった情報です。
この情報を正しく扱ってあげないと、Web上で写真を表示するときに、
ひっくり返ったり、横向きになったりしてしまうのです。
デジカメ画像の規格として、Exif(イグジフ)というものがあります。
※詳しくは、http://e-words.jp/w/Exif.html
この規格を採用しているカメラ(スマホカメラ含む)の場合、
写真以外に様々なデータが、付加情報として記録されます。
この付加情報を持っている写真データの場合は、
その情報を考慮し、写真を保存してあげないと、ひっくり返ったり、横向きになったりしてしまうのです。
iPhoneのカメラで採用されていることもあり、開発する際に遭遇することもあると思うので、
付加情報の確認とその修正のサンプルを載せておきます。
もちろん、C#です。
private void CheckProperties(string _path)
{
// 対象の写真を開きます
System.Drawing.Bitmap origin = new System.Drawing.Bitmap(_path);
// 画像の回転度合の設定用
System.Drawing.RotateFlipType rotation = System.Drawing.RotateFlipType.RotateNoneFlipNone;
// 開いた写真の情報を順に確認します。
foreach (System.Drawing.Imaging.PropertyItem item in origin.PropertyItems) {
// 写真の向きの情報は、0x0112というIDに割り振られているので、このID以外はすっ飛ばします
if (item.Id != 0x0112)
{
continue;
}
// IDが0x0112の時なので、向きの情報が取れる場所
switch(item.Value[0])
{
case 1:// 不要(回転・反転なし)
break;
case 2:// 水平方向に反転
break;
case 3:// 時計回りに180度回転
// 時計回りに180度回転しているので、180度回転して戻す
rotation = System.Drawing.RotateFlipType.Rotate180FlipNone;
break;
case 4:// 垂直方向に反転
break;
case 5:// 水平方向に反転+時計回りに270度回転
break;
case 6:// 時計回りに90度回転
// 時計回りに270度回転しているので、90度回転して戻す
rotation = System.Drawing.RotateFlipType.Rotate90FlipNone;
break;
case 7:// 水平方向に反転+時計回りに90度回転
break;
case 8:// 時計回りに270度回転
// 時計回りに90度回転しているので、270度回転して戻す
rotation = System.Drawing.RotateFlipType.Rotate270FlipNone;
break;
default: break;
}
// といった感じで、item.Value[0]の値で、どんな状態なのかが分かるのです。
// あとは、この値を元に処理をしてあげればOK
// 上記の3、6、8には正しくする処理を記載しましたので、参考にしてみてください
}
// 画像を複製して、回転を正す
System.Drawing.Image rotated_image = (System.Drawing.Image)origin.Clone();
// 複製する際のフォーマット(元の画像と一緒にする)
System.Drawing.Imaging.ImageFormat format = origin.RawFormat;
// オリジナルの画像から、欲しいものは奪えたので、閉じちゃう
origin.Dispose();
// 指定された角度だけ画像を回転する
rotated_image.RotateFlip(rotation);
// 回転を正したものを、指定のパスに保存
try
{
rotated_image.Save("新たな保存先", format);
}
catch(Exception ex)
{
rotated_image.Dispose();
}
finally
{
rotated_image.Dispose();
}
}
0 コメント:
コメントを投稿