이미지 컬러 피커 - 픽셀의 HEX 코드 추출

이 컬러 피커가 하는 일

이것은 팔레트 생성기가 아니라 스포이드입니다. 어떤 픽셀을 읽을지는 사용자가 정하고, 도구는 그 자리에 저장된 값을 그대로 보고합니다. 설명할 만한 부분은 값을 읽어 오는 방식인데, 뻔해 보이는 접근이 미묘하게 틀리기 때문입니다. 이미지 전체를 캔버스 하나에 그린 뒤 거기서 픽셀을 읽는 방법은 큰 사진에서 실패합니다. 브라우저는 캔버스 전체 면적을 약 1670만 픽셀, 대략 4096 x 4096으로 제한하는데 2400만 화소 카메라 파일은 이를 가볍게 넘깁니다. 그렇다고 이미지를 줄여 맞추면 표본 하나하나가 원본 픽셀 여러 개의 평균이 되어, 스포이드가 반드시 지켜야 할 그 한 가지가 가장 먼저 사라집니다. 그래서 이 도구는 표본을 읽을 때 포인터 주변의 작은 영역만 디코딩된 파일에서 곧바로 1대1 배율로 다시 그립니다. 원본 사각형과 대상 사각형의 크기가 같으므로 브라우저는 리샘플링이 아니라 픽셀 복사를 하고, 이미지가 아무리 커도 얻는 값은 파일 자체의 바이트입니다. 화면에 보이는 미리보기는 캔버스 한계나 화면 크기에 맞춰 축소될 수 있지만, 표본은 절대 거기서 읽지 않습니다. 같은 영역이 돋보기에도 쓰입니다. 돋보기는 원본 픽셀 하나를 13픽셀짜리 사각형으로 그리고 그 사이에 격자선을 넣으며, 가운데 칸의 테두리를 검정과 흰색으로 둘러 어떤 색 위에서도 보이게 합니다. 이것이 필요한 이유가 있습니다. 가로 4000픽셀 사진을 720픽셀 폭 칼럼에 넣으면 화면 픽셀 하나마다 이미지 픽셀이 약 5.6개씩 깔립니다. 화살표 키는 표본을 원본 픽셀 하나만큼, Shift와 함께 누르면 열 픽셀만큼 옮기는데, 1픽셀 테두리나 가느다란 안티에일리어싱 경계에 정확히 내려앉는 유일하고 확실한 방법입니다. 선택할 때마다 같은 8비트 값에서 HEX, RGB, HSL을 보여 주고, 픽셀이 완전히 불투명하지 않으면 8자리 HEXA와 RGBA도 함께 표시합니다. 반드시 알아 둘 실제 한계는 색 관리입니다. 대부분의 브라우저에서 캔버스는 내장 ICC 프로필을 버리므로, 값은 색 관리가 되는 편집기가 보여 주는 것이 아니라 브라우저가 실제로 그리는 것과 일치합니다.