Hình ảnh & hình ảnh · Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt
Cách trình duyệt xử lý hướng EXIF khi bạn chỉnh sửa ảnh trên điện thoại
· Cách thức hoạt động
image-editing vải vẽ browser-processing
Điện thoại thường lưu ảnh sang một bên và dựa vào một thẻ định hướng nhỏ để cho người xem biết cách xoay chúng. Bài đăng này giải thích thẻ đó là gì, trình duyệt áp dụng thẻ đó như thế nào trong quá trình giải mã và tại sao bản xuất đã chỉnh sửa không còn cần đến thẻ đó nữa.
Ảnh thẳng đứng trên điện thoại của bạn và nghiêng sang một bên ở mọi nơi khác — triệu chứng cụ thể và thẻ định hướng tám giá trị EXIF đằng sau nó
Bắt đầu với triệu chứng: một bức chân dung trông thẳng đứng trong thư viện điện thoại có thể bị nghiêng sang một bên ở người xem khác. EXIF Định hướng là một hướng dẫn được đính kèm vào tệp, với tám giá trị có thể mô tả các lần lật và một phần tư. Bằng chứng hữu ích ở đây hẹp hơn so với lời hứa chung của trình duyệt: trình chỉnh sửa này tải HTML Hình ảnh từ một đối tượng trong phạm vi URL, rút ra kết quả được giải mã và không có vật cố định nào chứng minh cách mọi trình duyệt xử lý mọi giá trị định hướng.
Sử dụng ảnh điện thoại được sao chép làm mẫu thử. Ghi lại kích thước được hiển thị của nó, cắt nhỏ, xuất nó và mở bản tải xuống trong trình xem thứ hai. Xuất canvas mã hóa lại các pixel được hiển thị thông qua canvas.toBlob dưới dạng PNG, JPEG hoặc WebP; nó không sao chép vùng chứa nguồn hoặc hứa giữ lại EXIF. Sự so sánh cho bạn biết điều gì đã xảy ra với raster này, chứ không phải mọi tệp sẽ làm gì.
Có thể có kết quả ngang, nhưng kho lưu trữ này không phân tích cú pháp tám giá trị định hướng EXIF
Sự không khớp tồn tại vì máy ảnh có thể ghi lại các hàng cảm biến theo thứ tự vật lý thuận tiện trong khi lưu trữ một hướng dẫn nhỏ gọn về cách trình bày các hàng đó. Hãy coi lời giải thích đó là bối cảnh chứ không phải là một tuyên bố về ứng dụng này. Kho lưu trữ không phân tích cú pháp tám giá trị Định hướng EXIF và không chứng minh phiên bản trình duyệt nào áp dụng chúng trước khi hình ảnh đến khung vẽ.
Hạn chế đó làm thay đổi quy trình làm việc thực tế. Giữ nguyên bản gốc, mở bản sao và đánh giá hình thức được giải mã thay vì cho rằng thẻ đã được diễn giải chính xác. Trình chỉnh sửa có thể xoay toàn bộ raster theo các bước 90 độ nhưng không thể chỉnh sửa hoặc khôi phục siêu dữ liệu định hướng. Do đó, việc xuất là một kết quả pixel mới có hành vi cần được kiểm tra trong trình xem quan trọng đối với bạn.
Lý do lưu trữ máy ảnh là bằng chứng lưu trữ bên ngoài; kiểm tra kết quả giải mã thực tế
Trình duyệt có thể giải mã hình ảnh với hướng dẫn định hướng đã được phản ánh trong các pixel được hiển thị. Các API hiện đại có thể hiển thị các lựa chọn giải mã, bao gồm các tùy chọn createImageBitmap, nhưng đường dẫn mã này không gọi createImageBitmap hoặc đặt tùy chọn imageOrientation. Nó tạo ra một HTML Hình ảnh từ một đối tượng URL và vẽ hình ảnh đó, do đó, tệp điện thoại và trình duyệt thực tế vẫn là một phần của thử nghiệm.
Kiểm tra kết quả ở hai giai đoạn: đầu tiên trong trình chỉnh sửa, sau đó sau khi xuất. Lưu ý cả hướng dọc rõ ràng cũng như chiều rộng và chiều cao được tài liệu báo cáo. Nếu chế độ xem đầu tiên sai, việc quay một phần tư thủ công có thể làm cho raster đang hoạt động trông đúng. Nếu quan điểm đầu tiên đúng, hãy tránh tuyên bố rằng siêu dữ liệu gốc được hiểu một cách phổ biến; bằng chứng kho lưu trữ chỉ hỗ trợ kết quả được giải mã được quan sát.
Trình chỉnh sửa này tải Hình ảnh HTML và không đặt tùy chọn giải mã hướng rõ ràng
Khi các pixel đi qua khung vẽ và được mã hóa lại, vùng chứa nguồn không còn là đối tượng được phân phối nữa. Trình chỉnh sửa kết hợp các pixel đã giải mã phần cắt của bạn và bất kỳ chỉnh sửa hiển thị nào khác, sau đó gọi canvas.toBlob cho đầu ra PNG, JPEG hoặc WebP. Quá trình đó không hứa hẹn sẽ giữ nguyên các trường EXIF. Đặc biệt, việc triển khai này không thể chỉnh sửa hoặc khôi phục thẻ định hướng để người xem sau này giải thích.
Mô tả an toàn nhất cho quá trình tải xuống là hình ảnh chứa các pixel do phiên chỉnh sửa này tạo ra. Mở lại nó trong một trình xem khác và kiểm tra hướng trước khi chia sẻ nó. Nếu người xem đó đồng ý, bạn đã xác minh một lần xuất cụ thể. Bạn chưa chứng nhận tất cả hành vi EXIF nhưng bạn đã thay thế hướng dẫn siêu dữ liệu không rõ ràng bằng kết quả raster có thể kiểm tra được cho tệp này.
Xuất canvas mã hóa lại các pixel được hiển thị nhưng không xác nhận trường siêu dữ liệu nào còn lại
Hãy xem xét một bức ảnh chân dung của điện thoại dành cho tin nhắn. Mở một bản sao, quan sát xem trình chỉnh sửa có hiển thị người đứng thẳng hay không và lưu ý kích thước được giải mã trước khi cắt. Nếu cảnh bị nghiêng sang một bên, hãy xoay raster theo các bước 90 độ cho đến khi hình ảnh hoạt động rõ ràng là chính xác, sau đó chỉ cắt sau khi chỉnh sửa đó. Hoạt động này là chỉnh sửa pixel chứ không phải sửa chữa siêu dữ liệu của tệp.
Xuất phần cắt và so sánh nó với chế độ xem trình chỉnh sửa trong trình xem hình ảnh thứ hai. PNG, JPEG và WebP được tạo từ canvas nên đầu ra là hình ảnh được mã hóa lại chứ không phải hộp đựng điện thoại ban đầu. Ghi lại định dạng và trình xem được sử dụng nếu kết quả hoạt động quan trọng. Cuộc kiểm tra nhỏ đó cung cấp cho bạn bằng chứng về bức chân dung này, đồng thời tránh được lời hứa không được hỗ trợ về mọi điện thoại hoặc trình duyệt.
Kiểm tra đã hoạt động: so sánh kích thước và hình thức đã giải mã trước khi cắt và xuất
Có ranh giới rõ ràng xung quanh cuộc điều tra này. Trình chỉnh sửa không cung cấp trình kiểm tra siêu dữ liệu, trình chỉnh sửa EXIF hoặc công cụ để khôi phục giá trị Định hướng ban đầu. Nó cũng không thể làm cho trình xem bỏ qua siêu dữ liệu định hướng hoạt động chính xác. Những công việc đó thuộc về phần mềm được thiết kế để bảo toàn hoặc viết lại vùng chứa hình ảnh, không thuộc về quy trình làm việc canvas có đầu ra là raster phẳng.
Cảnh báo tương tự cũng áp dụng cho các trường EXIF khác như thời gian chụp, vị trí và chi tiết máy ảnh. Xuất canvas tổng hợp đã giải mã pixel thông qua canvas.toBlob và không chứng nhận trường siêu dữ liệu nào còn lại. Giữ bản gốc nếu các trường đó quan trọng, sử dụng trình chỉnh sửa cho công việc hình ảnh hiển thị và xác minh tệp đã xuất trước khi coi tệp đó là tệp thay thế bảo toàn siêu dữ liệu.
Bài học rút ra: chỉnh sửa một lần, ngay thẳng ở mọi nơi - cách chỉnh sửa trong Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt tạo ra một tệp hiển thị giống nhau ở mọi trình xem
Bài học thực tế rất đơn giản nhưng bị hạn chế một cách có chủ ý: chỉnh sửa raster hiển thị, sau đó xác minh hướng xuất trong một trình xem khác. Trình chỉnh sửa hình ảnh và bản vẽ của trình duyệt rất hữu ích để mở ảnh điện thoại cục bộ, xoay toàn bộ raster theo các bước 90 độ, cắt xén và tạo ra bản tải xuống PNG, JPEG hoặc WebP. Đường dẫn tải và xuất của nó không chứng minh được yêu cầu xử lý EXIF phổ quát.
Việc kiểm tra đáng tin cậy chỉ mất chưa đầy một phút. Giữ lại nguồn, mở một bản sao, ghi lại hướng và kích thước ban đầu, thực hiện một chỉnh sửa nhỏ, xuất một lần và kiểm tra quá trình tải xuống ở nơi khác. Nếu tệp sai, hãy quay lại bản sao và sửa các pixel theo cách thủ công; đừng cho rằng thẻ định hướng có thể được khôi phục ở đây. Kết quả được xác minh chính là tệp bạn thực sự đã mở và kiểm tra.