9

Estava lendo sobre Uint8Array e Uint8ClampedArray na MDN, mais especificamente na página sobre TypedArrays e me deparei com uma tabela que compara os diferentes tipos.

inserir a descrição da imagem aqui

Eles são basicamente o mesmo, só que um é "clamped" e até agora só vi o Uint8ClampedArray sendo utilizado com canvas.

Na documentação diz:

The Uint8ClampedArray typed array represents an array of 8-bit unsigned integers clamped to 0-255;

Só que qualquer inteiro unsigned de 8 bits vai conter apenas números entre 0 e 255.

Então gostaria de perguntar, qual é a diferença entre Uint8Array e Uint8ClampedArray?

3
  • No Uint8ClampedArrayse especificarmos valores fora do intervalo 0-255 eles serão alterados para 0 ou 255. Se especificarmos um valor não inteiro ele será alterado para o inteiro mais próximo. 24/04/2019 às 19:36
  • e no Uint8Array não é assim? Qual a diferença? 24/04/2019 às 19:49
  • No Uint8Array o valor atribuído baseia-se nos primeiros 8 bits do valor especificado. 24/04/2019 às 20:04

1 Resposta 1

7

TL;DR

A diferença entre ambas acontece quando tentamos inserir um valor inteiro fora intervalo permitido (0 e 255 inclusive).

Uint8ClampedArray

  • Se for um número negativo, o valor será 0
  • Se for um número maior que 255, o valor será 255
let array = new Uint8ClampedArray([-1, 0, 255, 256]);
// resultado: Uint8ClampedArray([0, 0, 255, 255]);

Uint8Array

Sempre guarda os 8 bits menos significantes (a direta):

let array = new Uint8Array([-1, 0, 255, 256]);
// resultado: Uint8Array([255, 0, 255, 0]);

Pois:

┌─────────┬────────────────────────────────────┬─────────────────┐
│ Decimal │       Binário (8bits finais)       │      8bits      │
├─────────┼────────────────────────────────────┼─────────────────┤
│      -1 │ 111111111111111111111111(11111111) │ 11111111 == 255 │
│     256 │ 000000000000000000000001(00000000) │ 00000000 == 0   │
└─────────┴────────────────────────────────────┴─────────────────┘

Resposta completa

A diferença entre Uint8Array e Uint8ClampedArray está na atribuição de valores aos seus respectivos itens.

Na especificação do ECMAScrpt 2015 mostra que a operação de conversão para Uint8Arraye Uint8ClampedArray são diferentes. Sendo elas:

  • ToUint8 (usada em Uint8Arrays):

    1. Let number be ToNumber(argument).
    2. ReturnIfAbrupt(number).
    3. If number is NaN, +0, −0, +∞, or −∞, return +0.
    4. Let int be the mathematical value that is the same sign as number and whose magnitude is floor(abs(number)).
    5. Let int8bit be int modulo 28.
    6. Return int8bit.
  • ToUint8Clamp (usada em Uint8ClampedArrays):

    1. Let number be ToNumber(argument).
    2. ReturnIfAbrupt(number).
    3. If number is NaN, return +0.
    4. If number ≤ 0, return +0.
    5. If number ≥ 255, return 255.
    6. Let f be floor(number).
    7. If f + 0.5 < number, return f + 1.
    8. If number < f + 0.5, return f.
    9. If f is odd, return f + 1.
    10. Return f.

O que as duas fazem é basicamente:

  • Converter o valor para um inteiro de 8 bits
  • Tratar alguns casos especiais como NaN, Infinity, etc...

A principal diferença está nessa conversão para inteiro onde:

  • Uint8Array: trunca o valor para inteiro e utiliza apenas os últimos 8 bits do número, ignorando os restantes.

    Seria análogo a:

      let n = meuNumero;
      n = n & 0xff;
    

    Exemplo:

    let array = new Uint8Array([
        0,    // 0x00000000
        255,  // 0x000000ff
        256,  // 0x00000100
        -1    // 0xffffffff
    ]);
    
    // Usa apenas os 8 bits da direita (últimos 2 caracteres hexadecimais)
    console.log(array[0]);  // 00
    console.log(array[1]);  // ff
    console.log(array[2]);  // 00
    console.log(array[3]);  // ff

  • Uint8ClampedArray: arredonda o valor usando "round half to even" (se o número for N.5 o arredondamento é feito para o número par mais próximo, ex: 2.5 → 2 e 1.5 → 2). Se o valor arredondado for menor que 0 o valor será 0, se o valor for maior que 255 o valor será 255.

    Seria análogo a:

      let n = meuNumero;
    
      if (n < 0) {
          n = 0;
      }
    
      if (n > 255) {
          n = 255;
      }
    

    Exemplo:

    let array = new Uint8ClampedArray([0, 255, 256,-1])
    
    // Se o valor for menor que zero, o valor será 0
    // Se o valor for maior que 255, o valor será 255
    console.log(array[0]);  // 0
    console.log(array[1]);  // 255
    console.log(array[2]);  // 255
    console.log(array[3]);  // 0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .