이미지 및 사진 · 브라우저 이미지 및 그림 편집기
브라우저 이미지 편집기에서 자르기가 작동하는 방식: 캔버스 및 픽셀
· 작동 원리
이미지 편집 캔버스 브라우저 처리
자르기는 사소해 보이지만 브라우저 편집기는 파일을 디코딩하고 픽셀 직사각형을 캔버스에 복사한 다음 새로운 파일을 인코딩해야 합니다. 이 게시물에서는 각 단계를 안내하고 변경 사항과 동일하게 유지되는 사항을 설명합니다.
자른 사진이 잘린 이전 파일이 아닌 새 파일인 이유 - 자르기는 단순히 JPEG 또는 PNG에서 바이트를 삭제할 수 없으므로 편집기가 디코딩하고 다시 인코딩합니다.
JPEG는 표시되는 행당 독립적으로 삭제 가능한 바이트 범위가 아닌 압축된 이미지 데이터를 저장합니다. 바이트 끝 부분을 자르면 파일이 손상될 뿐 사진이 잘리지는 않습니다. 따라서 브라우저 편집기는 그림을 디코딩하고 직사각형을 선택한 다음 새 인코딩된 파일을 생성합니다. 원본은 디스크에 남아 있습니다. 되돌릴 수 있는 편집이 필요한 경우 소스와 선택 좌표를 유지하십시오. 내보낸 자르기에는 누락된 픽셀이 포함되어 있지 않습니다.
이미지를 비트맵으로 디코딩 - 무엇이든 선택하기 전에 브라우저가 압축된 바이트를 RGBA 픽셀의 너비 × 높이 그리드로 변환하는 방법
브라우저는 압축된 JPEG, PNG 또는 WebP를 너비 × 높이 샘플이 있는 비트맵으로 변환합니다. 4000×3000 이미지는 자르기 전의 1,200만 픽셀을 나타내며 픽셀당 몇 바이트로 인해 메모리 내 공간이 디스크의 파일보다 훨씬 커질 수 있습니다. ToolAcre는 매우 큰 작업 공간을 할당하기 전에 이미지 및 캔버스 제한을 확인합니다. 화면에 표시되는 내용은 뷰포트에 맞게 확대/축소될 수 있습니다. 픽셀을 복사하기 전에 자르기 직사각형을 이미지 좌표에 다시 매핑해야 합니다.
직사각형 선택: 소스 및 대상 좌표 — drawImage가 선택한 영역을 대상 크기의 캔버스에 복사하는 방법 및 전체 픽셀로의 반올림이 의미하는 것
직사각형은 소스 픽셀로 측정된 원점(x,y)에 너비와 높이를 더한 것입니다. ToolAcre는 해당 직사각형을 문서 경계로 제한하고 복합 미리보기의 스크린샷뿐만 아니라 보이는 모든 레이어를 자릅니다. 각 레이어에 대해 대상 캔버스를 만들고 9개의 인수(소스 캔버스, 소스 사각형, 대상 원점 및 대상 크기)를 사용하여 drawImage를 호출합니다. 소스 및 대상 치수가 동일하면 크기 조정 단계 없이 픽셀이 선택됩니다. 분수 포인터 위치는 표현 가능한 캔버스 픽셀에 맞춰 반올림되거나 고정됩니다.
결과를 다시 파일로 인코딩 - 내보내기 단계에서 형식과 품질이 결정되는 이유, 인코딩 자체는 정확하지만 인코딩은 정확하지 않은 이유
내보내기는 자르기와 별도의 작업입니다. 편집된 캔버스는 옵션 및 브라우저 지원에 따라 PNG, JPEG 또는 WebP로 인코딩될 수 있습니다. PNG는 무손실 인코더에 제공된 픽셀을 보존할 수 있습니다. JPEG는 직사각형이 정확하게 선택되더라도 일부 세부 정보를 버리고 알파가 없는 형식을 사용할 때 투명도에는 의도적인 배경이 필요합니다. 새 파일은 소스 메타데이터나 색상 정보를 생략할 수도 있으므로 원본의 바이트 단위 하위 집합으로 설명하지 마십시오.
실제 예: 4000×3000 사진을 1600×900 배너로 자르기 — 디코딩, 복사 및 내보내기를 통해 픽셀 수를 따릅니다.
4000×3000 사진이 있는 블로거의 경우 중앙에 위치한 1600×900 배너는 x=1200 및 y=1050에서 시작됩니다. drawImage는 1200~2799열과 1050~1949행을 1600×900 출력으로 복사합니다(1,200만 픽셀 대신 1.44백만 픽셀). 대신 편집자에게 전체 사진을 1600×900으로 축소하도록 요청하면 자르는 대신 가로 세로 비율을 변경하고 다시 샘플링합니다. 메모리가 제한된 전화기에서는 편집기가 매우 큰 입력을 먼저 줄일 수 있으므로 이러한 좌표를 반복하기 전에 표시된 치수를 확인하십시오.
내보낸 작물이 원본 사진에서 복구할 수 없는 것
이는 무손실 JPEG 블록 자르기가 아닙니다. 응용 프로그램은 픽셀을 그리고 새 컨테이너를 내보냅니다. 또한 내보낸 1600×900 파일은 원본을 닫은 후 버려진 여백을 복구할 수 없습니다. 레이어 편집 문서는 또 다릅니다. 자르기는 문서 레이어에 작용하고 내보내기는 다운로드한 이미지로 합성합니다. 민감한 자료의 경우 여백을 자르는 것이 단순히 불투명한 오버레이를 그리는 것보다 안전하지만 내보낸 픽셀을 검사하고 원본은 비공개로 유지합니다.
요점: 정확한 픽셀, 새로운 컨테이너 - 브라우저 자르기가 정확한 이유와 브라우저 이미지 및 그림 편집기가 파일을 업로드하지 않고 이를 수행하는 방법
브라우저 자르기는 어떤 디코딩된 픽셀을 유지할 것인지 정확하게 결정하며 선택한 인코더는 다운로드된 파일을 제어합니다. 브라우저 이미지 및 그림 편집기는 장치에서 두 단계(그림 로드, 직사각형 선택, 자르기 적용 및 내보내기)를 모두 수행합니다. 네트워크에는 어느 단계에서든 사진 바이트가 필요하지 않지만 사이트 자산과 공개된 애드센스/분석 요청을 DevTools의 파일 업로드와 혼동해서는 안 됩니다.