[Anderson Paraibano]

Como converter uma string base64 PNG em uma matriz de pixels sem usar o canvas getImageData em JavaScript?

Introdução:
O JavaScript é uma linguagem de programação versátil que permite manipular diferentes tipos de dados, incluindo imagens. Normalmente, quando se trabalha com imagens em JavaScript, é comum utilizar o objeto canvas e a função getImageData para obter os dados de pixels da imagem. No entanto, pode haver situações em que o uso do canvas não é possível ou desejável. Neste artigo, vamos explorar uma abordagem alternativa para converter uma string base64 PNG em uma matriz de pixels sem usar o canvas getImageData.

Passo 1: Obtendo a string base64 PNG
Para começar, vamos supor que você já tenha uma string base64 PNG. Essa string pode ser obtida de várias maneiras, como fazer o upload de um arquivo de imagem para o servidor e obter a string base64 como resposta, ou lendo um arquivo de imagem localmente e convertendo-o para base64.

Passo 2: Decodificando a string base64
O próximo passo é decodificar a string base64 para obter os dados binários da imagem. Em JavaScript, podemos usar a função atob para decodificar a string base64. O resultado será uma string contendo os dados binários da imagem.

javascript
Copy code
const base64String = ‘…’; // Sua string base64 PNG aqui
const binaryString = atob(base64String);
Passo 3: Convertendo os dados binários em uma matriz de pixels
Agora que temos os dados binários da imagem, precisamos convertê-los em uma matriz de pixels. Podemos fazer isso manipulando os bytes da string binária e organizando-os em uma matriz.

javascript
Copy code
const width = 640; // Largura da imagem
const height = 480; // Altura da imagem

const pixelArray = new Uint8ClampedArray(width * height * 4); // RGBA, 8 bits por canal

for (let i = 0; i < binaryString.length; i++) {
pixelArray[i] = binaryString.charCodeAt(i);
}
Neste exemplo, estamos criando uma matriz Uint8ClampedArray para armazenar os valores dos pixels. Cada pixel é representado por quatro bytes (RGBA), e multiplicamos a largura e altura da imagem para obter o tamanho total da matriz.

Em seguida, percorremos a string binária e copiamos os valores de cada byte para a matriz de pixels.

Passo 4: Manipulando a matriz de pixels
Agora que temos a matriz de pixels, podemos realizar qualquer manipulação desejada. Por exemplo, podemos percorrer a matriz e verificar o valor de cada pixel, aplicar filtros, alterar cores, entre outros.

javascript
Copy code
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const pixelIndex = (y * width + x) * 4;

const red = pixelArray[pixelIndex];
const green = pixelArray[pixelIndex + 1];
const blue = pixelArray[pixelIndex + 2];
const alpha = pixelArray[pixelIndex + 3];

// Realize qualquer manipulação desejada nos valores dos pixels
// …

// Exemplo: inverter a cor do pixel
pixelArray[pixelIndex] = 255 – red;
pixelArray[pixelIndex + 1] = 255 – green;
pixelArray[pixelIndex + 2] = 255 – blue;
}
}
Neste exemplo, estamos percorrendo a matriz de pixels e acessando cada componente RGBA de um pixel específico. Em seguida, estamos invertendo a cor do pixel subtraindo os valores RGB de 255.

Conclusão:
Neste artigo, exploramos uma abordagem alternativa para converter uma string base64 PNG em uma matriz de pixels em JavaScript sem usar o canvas getImageData. Ao decodificar a string base64 e manipular os bytes diretamente, conseguimos obter os dados da imagem e organizá-los em uma matriz. A partir daí, podemos realizar várias manipulações nos pixels de acordo com nossas necessidades.

[Autor]

Posts