Hình ảnh bị xoay khi upload lên server được chụp bằng điện thoại

Vấn đề khi upload hình ảnh từ điện thoại lên server bị xoay hình

Bởi Nguyễn Hoàng Hải
48 Xem

Chẳng là gần đây mình có một module thực hiện việc upload hình ảnh từ mobile lên server, tuy nhiên khi hình ảnh được đẩy lên server rồi thì xem lại có hình thì bị xoay, hình thì không như dưới đây

Hình ảnh bị xoay khi upload lên server được chụp bằng điện thoại

Sau khi loay hoay tìm các vấn đề không biết tại sao thì cuối cùng mình cũng tìm ra từ khóa “mobile image exif orientation”. Và cuối cùng vấn đề của mình cũng đã được giải quyết. Lý do là vì bất kỳ hình ảnh nào được chụp từ thiết bị di động sẽ đều được lưu hướng gia tốc ( xoay ) hiện tại của điện thoại vào thẻ Exif, gọi là metadata image. Các bạn có thể tìm hiểu thêm thông tin về Exif tại đây  . Dựa vào thông tin được lưu trong ảnh đó thì các trình xem ảnh sẽ tự động xoay hướng ảnh sao cho phù hợp. Vấn đề là khi chúng ta upload lên server và chương trình xem ảnh của chúng ta lại không quan tâm đến thông tin đó, bởi vậy ảnh bị hiển thi sai hướng. Giải quyết vấn đề này chúng ta có 2 hướng:

  1. Đọc thông tin đó và xoay lại hướng phù hợp trước khi ra view người xem.
  2. Xoay lại hướng trước khi lưu vào server.

Giá trị được lưu vào EXIF orientation sẽ là kiểu số từ 1 đến 8:

  1. 0 độ, không cần điều chỉnh
  2. 0 độ, hình ảnh được lật về bên phải
  3. 180 độ, ảnh lật xuống phía dưới
  4. 180 độ, ảnh lật về phía phải
  5. 90 độ, ảnh lật về phía phải
  6. 90 độ, quay phải
  7. 270 độ, ảnh lật về phía phải
  8. 270 độ, quay phải

Về vấn để xử lý trên code C# với đối tượng Image hoặc Bitmap thì đầu tiên mình lấy giá trị Exif Orientation của nó, sau đó giựa vào giá trị từ 1 – 8 đó để biết được hướng ảnh cần xoay, cuối cùng gọi phương thức RotateFlip của ảnh đó là xong.

// Biến img là biến Image hình ảnh
// 0x0112 là tag Orientation được lưu trong Exif
var _exifOrientation = img.GetPropertyItem(0x0112); // return 1 -> 8
// Để chắc ăn là hình ảnh có tag đó thì ta có thể dùng lệnh kiểm tra
if (img.PropertyIdList.Contains(0x0112)){ .... }

Đoạn code lấy hướng cần xoay của ảnh giựa vào giá trị Exif Orientation

private RotateFlipType GetOrientationToFlipType(int orientationValue)
{
  RotateFlipType rotateFlipType = RotateFlipType.RotateNoneFlipNone;
  switch (orientationValue)
  {
    case 1:
      rotateFlipType = RotateFlipType.RotateNoneFlipNone;
      break;
    case 2:
      rotateFlipType = RotateFlipType.RotateNoneFlipX;
      break;
    case 3:
      rotateFlipType = RotateFlipType.Rotate180FlipNone;
      break;
    case 4:
      rotateFlipType = RotateFlipType.Rotate180FlipX;
      break;
    case 5:
      rotateFlipType = RotateFlipType.Rotate90FlipX;
      break;
    case 6:
      rotateFlipType = RotateFlipType.Rotate90FlipNone;
      break;
    case 7:
      rotateFlipType = RotateFlipType.Rotate270FlipX;
      break;
    case 8:
      rotateFlipType = RotateFlipType.Rotate270FlipNone;
      break;
    default:
      rotateFlipType = RotateFlipType.RotateNoneFlipNone;
      break;
  }
  return rotateFlipType;
}

Xoay lại hình ảnh theo hướng cần thiết

img.RotateFlip(GetOrientationToFlipType(_exifOrientation));
5 1 vote
Article Rating

CÓ THỂ BẠN QUAN TÂM

Theo dõi
Notify of
guest
0 Comments
Inline Feedbacks
Xem tất cả bình luận