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));

The post Vấn đề khi upload hình ảnh từ điện thoại lên server bị xoay hình first appeared on HaiNH.

[su_youtube url=”https://www.youtube.com/watch?v=OxjhHYc8mzI&t=69s”]

Ngoài viết bằng Java ra thì mình có viết bằng .NET, các thuật toán xử lý ảnh đều do mình viết mà không cần thư viện khác. Các bạn có thể tham khảo demo ở đây : http://occr.apphb.com

Xem thêm phiên bản mới phát hiện và đọc số container bằng camera : Phát hiện và đọc số container bằng camera – HaiNH's Blog (hainh.dev/)

The post Phần mềm phát hiện vị trí Container ISO first appeared on HaiNH.