Uint8Array, Uint8CrampedArray 설명과 비교

Uint8는 Unsigned 8-bit integer의 약자로, 8비트 크기의 부호 없는 정수를 의미합니다. 여기서 unsigned는 정수의 부호(양수 또는 음수)를 저장하지 않는다는 것을 의미하며, 따라서 이 형식으로 표현할 수 있는 값은 모두 0 이상의 양수입니다. 8-bit는 숫자가 표현되는 데이터의 크기가 8비트, 즉 1바이트라는 것을 뜻합니다.

 

따라서, Uint8은 0에서 255까지의 값을 가질 수 있습니다. 이는 8비트로 표현할 수 있는 모든 가능한 값 (2^8 = 256가지)입니다. 주로 픽셀 데이터, 네트워크 프로토콜, 하드웨어 인터페이스 등에서 사용됩니다. 예를 들어, 이미지를 처리할 때 각 색상 채널(R, G, B)을 0부터 255까지의 값으로 표현하는데, 이때 Uint8이 사용됩니다.

 

이 개념을 이용한 Uint8Array와 Uint8ClampedArray는 둘 다 JavaScript에서 8비트 부호 없는 정수의 배열을 표현하는 객체입니다. 하지만 두 객체는 값이 배열에 저장되는 방식에서 중요한 차이점을 가지고 있습니다.

Uint8Array

• 범위: 0에서 255까지의 값을 저장할 수 있습니다.
• 결과: 값이 배열에 설정될 때, 0보다 작은 값이나 255보다 큰 값은 그대로 저장되지 않고 모듈러 연산(256으로 나눈 나머지)을 통해 범위 내로 맞춰집니다. 즉, 260은 256으로 나누면 나머지가 4이므로 4로 저장되고, -5는 256을 더해 251로 저장됩니다.

Uint8ClampedArray

• 범위: 마찬가지로 0에서 255까지의 값을 저장할 수 있습니다.
• 결과: 값이 배열에 설정될 때, 0보다 작은 값은 자동으로 0으로, 255보다 큰 값은 자동으로 255로 조정됩니다(클램핑). 즉, 260은 최대값인 255로 조정되고, -5는 최소값인 0으로 조정됩니다.
• Uint8ClampedArray(1502384) 의미는 932(가로) x 403(세로) = 375,596 x 4 (colors) = 1,502,384 ( 색상 알파값은 0~255표기, 0은 fully transparent, 255는 fully visible)

// Uint8Array 예시
let uint8Array = new Uint8Array(4);
uint8Array[0] = 260; // 260은 255를 초과
uint8Array[1] = -5;  // -5는 0 미만
uint8Array[2] = 128;
uint8Array[3] = 255;

console.log(uint8Array);  // 출력: Uint8Array(4) [ 4, 251, 128, 255 ]

// Uint8ClampedArray 예시
let uint8ClampedArray = new Uint8ClampedArray(4);
uint8ClampedArray[0] = 260; // 255로 클램프
uint8ClampedArray[1] = -5;  // 0으로 클램프
uint8ClampedArray[2] = 128;
uint8ClampedArray[3] = 255;

console.log(uint8ClampedArray);  // 출력: Uint8ClampedArray(4) [ 255, 0, 128, 255 ]

 

유사 참고

 

• Int8Array: 8비트 부호 있는 정수 배열. 값의 범위는 -128에서 127입니다.
• Uint16Array: 16비트 부호 없는 정수 배열. 값의 범위는 0에서 65535입니다.
• Int16Array: 16비트 부호 있는 정수 배열. 값의 범위는 -32768에서 32767입니다.
• Uint32Array: 32비트 부호 없는 정수 배열. 값의 범위는 0에서 4294967295입니다.
• Int32Array: 32비트 부호 있는 정수 배열. 값의 범위는 -2147483648에서 2147483647입니다.