이미지 및 사진 · 브라우저 이미지 및 그림 편집기
휴대폰 사진을 편집할 때 브라우저가 EXIF 방향을 처리하는 방법
· 작동 방식
이미지 편집 캔버스 브라우저 처리 중
휴대전화는 종종 사진을 옆으로 저장하고 작은 방향 태그를 사용하여 시청자에게 사진 회전 방법을 알려줍니다. 이 게시물에서는 해당 태그가 무엇인지, 브라우저가 디코딩 중에 태그를 적용하는 방법, 편집된 내보내기에 더 이상 태그가 필요하지 않은 이유에 대해 설명합니다.
휴대전화에서는 수직으로, 다른 곳에서는 옆으로 놓여 있는 사진 — 구체적인 증상과 그 뒤에 있는 8값 EXIF 방향 태그
증상부터 시작하세요. 휴대폰 갤러리에서는 똑바로 보이는 초상화가 다른 뷰어에서는 옆으로 도착할 수 있습니다. EXIF 방향은 파일에 첨부된 지침으로, 뒤집기와 1/4회전을 설명하는 8가지 가능한 값이 있습니다. 여기서 유용한 증거는 일반적인 브라우저 약속보다 좁습니다. 이 편집기는 범위가 지정된 개체 URL에서 HTML 이미지를 로드하고 디코딩된 결과를 그리며 모든 브라우저가 모든 방향 값을 처리하는 방법을 증명하는 고정 장치가 없습니다.
복사한 휴대폰 사진을 테스트 표본으로 사용하세요. 표시된 크기를 기록하고, 작게 자르고, 내보내고, 두 번째 뷰어에서 다운로드를 엽니다. 캔버스 내보내기는 canvas.toBlob을 통해 표시된 픽셀을 PNG, JPEG 또는 WebP로 다시 인코딩합니다. 소스 컨테이너를 복사하거나 EXIF를 유지하겠다고 약속하지 않습니다. 비교를 통해 이 래스터에 무슨 일이 일어났는지 알려주는 것이지 모든 파일이 어떤 일을 하는지는 알 수 없습니다.
옆쪽 결과가 가능하지만 이 저장소는 8개의 EXIF 방향 값을 구문 분석하지 않습니다.
카메라가 센서 행을 편리한 물리적 순서로 기록하는 동시에 해당 행이 어떻게 표시되어야 하는지에 대한 간략한 지침을 저장할 수 있기 때문에 불일치가 발생합니다. 해당 설명을 이 애플리케이션에 대한 주장이 아닌 맥락으로 취급하십시오. 저장소는 8개의 EXIF 방향 값을 구문 분석하지 않으며 이미지가 캔버스에 도달하기 전에 해당 값을 적용하는 브라우저 버전을 증명하지 않습니다.
이러한 제한으로 인해 실제 작업 흐름이 변경됩니다. 원본을 그대로 유지하고 복사본을 열고 태그가 올바르게 해석되었다고 가정하기보다는 디코딩된 모양을 판단하십시오. 편집기는 전체 래스터를 90도 단위로 회전할 수 있지만 방향 메타데이터를 편집하거나 복원할 수는 없습니다. 따라서 내보내기는 사용자에게 중요한 뷰어에서 동작을 확인해야 하는 새로운 픽셀 결과입니다.
카메라 저장 근거는 저장소 증거 외부에 있습니다. 실제 디코딩된 결과를 검사합니다.
브라우저는 렌더링된 픽셀에 이미 반영된 방향 지침을 사용하여 이미지를 디코딩할 수 있습니다. 최신 API는 createImageBitmap 옵션을 포함한 디코딩 선택 사항을 제공할 수 있지만 이 코드 경로는 createImageBitmap을 호출하거나 imageOrientation 옵션을 설정하지 않습니다. 개체 URL에서 HTML 이미지를 생성하고 해당 이미지를 그리므로 실제 전화 파일과 브라우저는 실험의 일부로 유지됩니다.
두 단계, 즉 먼저 편집기에서 결과를 검사한 다음 내보낸 후 결과를 검사합니다. 문서에서 보고된 겉보기 세로 방향과 너비 및 높이를 모두 확인하세요. 첫 번째 보기가 잘못된 경우 수동으로 1/4회전을 하면 작업 래스터가 올바르게 보이도록 만들 수 있습니다. 첫 번째 견해가 옳다면 원본 메타데이터가 보편적으로 이해되었다고 주장하지 마십시오. 저장소 증거는 관찰된 디코딩 결과만 지원합니다.
이 편집기는 HTML 이미지를 로드하고 명시적인 방향 디코딩 옵션을 설정하지 않습니다.
픽셀이 캔버스를 통과하고 다시 인코딩되면 소스 컨테이너는 더 이상 전달되는 객체가 아닙니다. 편집기는 디코딩된 픽셀을 자르기 및 기타 눈에 보이는 편집 내용과 합성한 다음 PNG, JPEG 또는 WebP 출력에 대해 canvas.toBlob을 호출합니다. 해당 프로세스는 EXIF 필드 보존을 약속하지 않습니다. 특히 이 구현에서는 나중에 보는 사람이 해석할 수 있도록 방향 태그를 편집하거나 복원할 수 없습니다.
다운로드에 대한 가장 안전한 설명은 이 편집 세션에서 생성된 픽셀이 포함된 이미지입니다. 공유하기 전에 다른 뷰어에서 다시 열고 방향을 확인하세요. 해당 뷰어가 동의하면 하나의 구체적인 내보내기를 확인한 것입니다. 모든 EXIF 동작을 인증하지는 않았지만 모호한 메타데이터 지침을 이 파일에 대해 테스트 가능한 래스터 결과로 대체했습니다.
캔버스 내보내기는 표시된 픽셀을 다시 인코딩하지만 어떤 메타데이터 필드가 남아 있는지 확인하지 않습니다.
메시지를 전달하기 위한 인물 전화 사진을 고려해보세요. 복제본을 열고 편집기에 사람이 똑바로 표시되는지 관찰하고 자르기 전에 디코딩된 크기를 기록해 둡니다. 장면이 옆으로 있는 경우 작업 이미지가 눈에 띄게 정확해질 때까지 래스터를 90도 단계로 회전한 다음 수정한 후에만 자릅니다. 작업은 파일 메타데이터 복구가 아닌 픽셀 편집입니다.
자르기를 내보내고 두 번째 이미지 뷰어의 편집기 보기와 비교합니다. PNG, JPEG 및 WebP는 캔버스에서 생성되므로 출력은 원래 휴대폰 컨테이너가 아닌 다시 인코딩된 이미지입니다. 결과가 운영상 중요한 경우 사용된 형식과 뷰어를 기록합니다. 이 소규모 감사는 모든 휴대폰이나 브라우저에 대해 지원되지 않는 약속을 피하면서 이 초상화에 대한 증거를 제공합니다.
작업 확인: 자르고 내보내기 전에 디코딩된 크기와 모양을 비교합니다.
이 조사에는 명확한 경계가 있습니다. 편집기는 메타데이터 검사기, EXIF 편집기 또는 원래 방향 값을 복원하기 위한 도구를 제공하지 않습니다. 또한 방향 메타데이터를 무시하는 뷰어가 올바르게 작동하도록 만들 수도 없습니다. 이러한 작업은 출력이 평면화된 래스터인 캔버스 작업 흐름이 아니라 이미지 컨테이너를 보존하거나 다시 작성하도록 설계된 소프트웨어에 속합니다.
캡처 시간, 위치, 카메라 세부정보 등 다른 EXIF 필드에도 동일한 주의가 적용됩니다. 캔버스 내보내기는 canvas.toBlob을 통해 디코딩된 픽셀을 합성하며 어떤 메타데이터 필드가 남아 있는지 확인하지 않습니다. 해당 필드가 중요한 경우 원본을 유지하고, 눈에 보이는 이미지 작업을 위해 편집기를 사용하고, 메타데이터 보존 대체 파일로 처리하기 전에 내보낸 파일을 확인하세요.
요점: 한 번만 편집하면 어디에서나 바로 세워집니다. 브라우저 이미지 및 그림 편집기에서 편집하면 모든 뷰어에 동일하게 표시되는 파일이 생성되는 방법
실용적인 내용은 간단하지만 의도적으로 제한되었습니다. 보이는 래스터를 편집한 다음 다른 뷰어에서 내보낸 방향을 확인하세요. 브라우저 이미지 및 그림 편집기는 로컬 전화 사진을 열고, 전체 래스터를 90도 단계로 회전하고, 자르고, PNG, JPEG 또는 WebP 다운로드를 생성하는 데 유용합니다. 로더와 내보내기 경로는 범용 EXIF 처리 주장을 정당화하지 않습니다.
신뢰할 수 있는 확인에는 1분도 채 걸리지 않습니다. 소스를 유지하고, 복사본을 열고, 초기 방향과 치수를 기록하고, 작은 편집을 한 후, 한 번 내보내고, 다른 곳에서 다운로드를 검사하세요. 파일이 잘못된 경우 사본으로 돌아가서 수동으로 픽셀을 수정하십시오. 여기에서 방향 태그를 복원할 수 있다고 가정하지 마세요. 검증된 결과는 실제로 열어서 확인한 파일입니다.