A classe GrayImageData realiza operações somente com um canal em tons de cinza.
Métodos básicos
Pre-processamento
Mesclagem de imagens
Detecção de bordas
Equalização
Morfologia
Seguindo o padrão do ImageData, o GrayImageData pode ser inciado dos seguintes modos
new GrayImageData(width, height)
new GrayImageData(dataArray, width)
new GrayImageData(dataArray, width, height)Sendo width e height do tipo Number,
e dataArray do tipo Uint8ClampedArray.
| Propriedade | Tipo | Descrição |
|---|---|---|
| width | Number | Um valor inteiro indicando a quantidade de colunas da imagem. |
| height | Number | Um valor inteiro indicando a quantidade de linhas da imagem. |
| data | Uint8ClampedArray | Os valores de cada um dos pixeis da imagem. |
Note
data é um Uint8ClampedArray pois os valores resultante das operações deverão estar entre 0 e 255.
Inicia GrayImageData a partir de um ImageData.
| Argumento | Tipo | Descrição |
|---|---|---|
| input | ImageData | Imagem original |
| options | Object | Opções para iniciar o GrayImageData |
Note
Em options podem ser especificado um recorte (crop) e/ou um redimensionamento (scale) da imagem original.
crop deverá ser um Array de 4 inteiros, os dois primeiros indicam a posição do recorte e os dois ultimos indicam as dimensões.
scale deverá ser um Array de 2 flutuantes, indicando a scala nos eixos x e y.
No exemplo a seguir, o GrayImageData é iniciado recortando (crop) um quadrado 100x100 pixels (deslocado 50 pixels da esquerda e do topo) é ampliado (scale) em 200%.
DIP.Load('path/to/image', function( imagedata, context ) {
let options = {
crop: [ 50, 50, 100, 100 ],
scale: [ 2, 2 ]
};
let graySource = DIP.GrayImageData.From( imagedata, options );
DIP.CreateContext( graySource.getImageData(), document.body );
});Realiza a mesclagem de dois GrayImageData.
| Argumento | Tipo | Descrição |
|---|---|---|
| input | GrayImageData | Segunda Imagem para a mesclagem |
| as | Number | Brilho da primeira imagem (instância referenciada). Valor entre 0.0 < x 1.0. |
| bs | Number | Brilho da segunda imagem (parametro input). Valor entre 0.0 < x 1.0. |
Uma nova GrayImageData com a menor dimensão entre as duas imagens informadas.
Seja, imageA e imageB instâncias de GrayImageData. É gerado uma nova imagem (imageC) da mesclagem entre imageA e imageB.
let imageC = imageA.blend( imageB, .5, .5 );
DIP.CreateContext( imageC, document.body );Realiza a mesclagem dos menores valores entre dois GrayImageData.
| Argumento | Tipo | Descrição |
|---|---|---|
| input | GrayImageData | Segunda Imagem para a mesclagem |
Uma nova GrayImageData com a menor dimensão entre as duas imagens informadas.
Realiza a mesclagem dos maiores valores entre dois GrayImageData.
| Argumento | Tipo | Descrição |
|---|---|---|
| input | GrayImageData | Segunda Imagem para a mesclagem |
Uma nova GrayImageData com a menor dimensão entre as duas imagens informadas.
Ajuste global da intensidade dos pixels, é realizado multiplicando os valores de intensidade.
| Argumento | Tipo | Descrição |
|---|---|---|
| s | Number | Valor que irá multiplicar o valor de cada pixel. |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
CLAHE (Contrast Limited Adaptive Histogram Equalization) é uma técnica de processamento de imagem usada para melhorar o contraste local em uma imagem. Ela é uma extensão do método de equalização de histograma, que redistribui os valores de intensidade dos pixels em uma imagem para melhorar o contraste global.
DIP.Load( "path/to/image", function( imagedata ) {
imagedata.clahe();
DIP.CreateContext( imagedata, document.body );
});| Antes | Depois |
|---|---|
 |
 |
 |
 |
Cria uma nova instâcia de GrayImageData com as mesmas dimensões e valores.
Uma nova GrayImageData.
DIP.Load( "path/to/image", function( imagedata ) {
let copied = imagedata.clone();
});O Fechamento é uma operação de morfologia, da qual realiza a dilatação seguida de erosão.
Pode ser utilizada para preencher pequenos buracos e conectar regiões próximas, fechando espaços dentro de objetos e suavizando contornos.
| Argumento | Tipo | Descrição |
|---|---|---|
| matrix | Matrix | Uma matriz que define a estrutura da operação (Quadrado, Cruz, Círculo) |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
Realiza o contraste da GrayImageData.
| Argumento | Tipo | Descrição |
|---|---|---|
| value | Number | Valor que ajusta o contraste da imagem |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
O metodo conv realiza a convolução em uma imagem.
| Argumento | Tipo | Descrição |
|---|---|---|
| matrix | Matrix | A matriz de convolução (tambem chamadas de Kernel ou Mask). Dependendo de seus valores poderá resultados com diferentes efeitos. |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
Realiza o recorte da GrayImageData.
| Argumento | Tipo | Descrição |
|---|---|---|
| rx | Number | Posição X do inicio do recorte |
| ry | Number | Posição Y do inicio do recorte |
| rw | Number | Largura do recorte |
| rh | Number | Altura do recorte |
O retorno é uma nova instâcia de (GrayImageData) com as dimensões rwxrh.
Seja imageA uma instância de GrayImageData.
let imageB = imageA.blend( 0, 0, 50, 50 );
DIP.CreateContext( imageB, document.body );A dilatação é uma operação em morfologia, da qual expande regiões claras, tornando os objetos maiores.
| Argumento | Tipo | Descrição |
|---|---|---|
| matrix | Matrix | Uma matriz que define a estrutura da operação (Quadrado, Cruz, Círculo) |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
A erosão é uma operação em morfologia, da qual reduz as regiões claras, tornando os objetos menores.
| Argumento | Tipo | Descrição |
|---|---|---|
| matrix | Matrix | Uma matriz que define a estrutura da operação (Quadrado, Cruz, Círculo) |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
Preenche todos os pixeis da imgem com o mesmo valor.
| Argumento | Tipo | Descrição |
|---|---|---|
| bytes | Number | Valor da intencidade do pixel (8 bits). |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
Os argumentos são opcional, caso n
| Argumento | Tipo | Descrição |
|---|---|---|
| wx | Number | Posição X do inicio do recorte.\nPadrão é 0 |
| wy | Number | Posição Y do inicio do recorte.\nPadrão é 0 |
| ww | Number | Largura do recorte.\nPadrão é a largura da imagem. |
| wh | Number | Altura do recorte.\nPadrão é altura da imagem. |
O retorno é um Array com 3 itens, um para cada canal da imagem (RGB).
Cada item é um Object, em que key é a intensidade do pixel e value é a contagem (ocorrência) dessa intensidade.
Obs. Pode ser que algumas intensidades não existam no canal, e nesse caso não são contabilizados.
Seja source uma instância de GrayImageData.
let histogramData = source.getHistogram();
let redChannel = histogramData[0];
let greenChannel = histogramData[1];
let blueChannel = histogramData[2];Realiza a leitura dos pixeis do ponto ax,ay ao bx,by.
| Argumento | Tipo | Descrição |
|---|---|---|
| ax | Number | Posição X do inicio da linha |
| ay | Number | Posição Y do inicio da linha |
| bx | Number | Posição X do final da linha |
| by | Number | Posição Y do final da linha |
O retorno é um Uint32Array, em que cada item é a cor de um pixel (32 bits).
Como GrayImageData possui somente um canal, é necessário converter em ImageData para ser renderizado.
O retorno é um ImageData.
Inverte os valores de RGB.
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
A abertura é uma operação de morfologia, da qual realiza a erosão seguida de dilatação.
Pode ser utilizada usada para remover ruídos e suavizar contornos sem afetar significativamente o tamanho dos objetos principais.
| Argumento | Tipo | Descrição |
|---|---|---|
| matrix | Matrix | Uma matriz que define a estrutura da operação (Quadrado, Cruz, Círculo) |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
Redimensiona a GrayImageData.
| Argumento | Tipo | Descrição |
|---|---|---|
| sx | Number | Valor que ira multiplicar no eixo X. Padrão é 1. |
| sy | Number | Valor que ira multiplicar no eixo Y. Padrão é 1. |
O retorno é uma nova instâcia de (GrayImageData) com as dimensões multiplicadas (sx*width, sy*height).
Define o valor dos pixeis do ponto ax,ay ao bx,by. Note que o parâmetro bytes pode ser
- Number: A linha toda será preenchida com o mesmo valor; ou
- Uint32Array: A linha será preenchida com os valores da sequência informada.
| Argumento | Tipo | Descrição |
|---|---|---|
| ax | Number | Posição X do inicio da linha |
| ay | Number | Posição Y do inicio da linha |
| bx | Number | Posição X do final da linha |
| by | Number | Posição Y do final da linha |
| bytes | Number | Uint32Array | Valores em que cada pixel que será preenchido na linha. Recomendação: Utilizar o método getBytes() de uma instância de Color. |
O retorno é a própria instâcia (RGBAImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
Torna a imagem em preto e branco. Note que a imagem ainda possui os 4 canais (RGBA), porém os canais RGB possuem o mesmo valor.
| Argumento | Tipo | Descrição |
|---|---|---|
| value | Number | Valor de referencia para a binarização. |
| min | Number | Valor alternativo para quando o pixel estiver abaixo do limite. Padrão é 0 |
| max | Number | Valor alternativo para quando o pixel estiver acima do limite. Padrão é 255 |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
Torna a imagem em preto e branco, em que o threshold é o valor medio das intencidades. Note que a imagem ainda possui os 4 canais (RGBA), porém os canais RGB possuem o mesmo valor.
| Argumento | Tipo | Descrição |
|---|---|---|
| stepper | Number | Define os intervalos dos pixeis lidos, para otimizr o cálculo do do limite. Padrão é 5. |
| min | Number | Valor alternativo para quando o pixel estiver abaixo do limite. Padrão é 0. |
| max | Number | Valor alternativo para quando o pixel estiver acima do limite. Padrão é 255. |
O retorno é a própria instâcia (GrayImageData), ou seja, os valores da instância são alterados. Desse modo é possivel realizar o encadeamento de métodos.
É possivel transformar a imagem em texto, de forma que os caracteres imitem um gradiente de tons de cinza.
O retorno é uma String.
let grayScaleChars = "$%#kw0Xvr/1?+:~.";
let asciiArt = source.toString( grayScaleChars );
console.log( asciiArt ).................................................................................. .................................................................................. .................................................................................. ......................%%%................................%%0...................... ......................%%%%%0..........................%%%%%%...................... .....................0%%%%%%%%......................%%%%%%%%...................... .....................%%%%%%%%%%?...%%%%%%%%%%%%%..%%%%%%%%%%...................... .....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%...................... .....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%0..................... .....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%0..................... .....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%...................... .....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%...................... ......................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%...................... .....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%..................... .....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.................... ....................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1................... ...................?%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%................... ...................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%................... ...................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.................. ..................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.................. ..................%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.................. ..................%%%%%%%%%%%1111111111111111111111111%%%%%%%%%%.................. ..................%%%%%%%%%1:::::::::::::::::::::::::::1%%%%%%%%.................. ..................%%%%%%%%1:::::::::::::::::::::::::::::1%%%%%%%.................. ..................%%%%%%%1::::....::::::::::::::::...::::%%%%%%%.................. ..................%%%%%%%::::......::::::::::::::.....::::%%%%%%.................. ..................%%%%%%1::::..vvv.:::::::::::::..vv?.::::%%%%%%.................. ..................%%%%%%:::::.v.vv.:::::::::::::.v.vv..::::%%%%%.................. ..................1%%%%%::::..vvvvv.::::::::::::.vvvv..::::%%%%%.................. ...................%%%%%::::..vvvvv.::::::::::::.vvvv..::::%%%%%.................. ...................%%%%%:::::.vvvvv:::::::::::::.vvvv..::::%%%%0.................. ......0%%?.........0%%%%:::::.vvvv.:::::::::::::.vvvv..::::%%%%..........?%%0..... ....................%%%%0::::..1v..:::::::::::::..vv..::::%%%%%................... ..........%%........0%%%%:::::....:::::::v:::::::....:::::%%%%?........%%?........ .....00..............%%%%0:::::::::::::::v:::::::::.:::::0%%%%..............1%.... ......................%%%%:::::::::::::::::::::::::::::::%%%%..................... .......................%%%%::::::::::::1::1:::::::::::::%%%%...................... ........................%%%%%::::::::::::v:::::::::::::%%%%....................... ..........................%%%%%%::::::::::::::::::::%%%%%1........................ .................%1.........0%%%%%%%%%%%%%%%%%%%%%%%%%%........................... ................%%%+%..........?%%%%%%%%%%%%%%%%%%%%.............................. ..................%%+%.............%%%%%%%%%%%%%.................................. ...................%%%%...........%%%%%%%%%%%%%%%?................................ ................++..%%+..........%%%%%%%%%%%%%%%%%................................ .....................%%+.........%%%%%%%%%%%%%%%%%................................ .....................%%%%?......%%%%%%%%%.%%%%%%%%%............................... ......................%%%+%%%%%1%%%%%%%%%.%%%%%%%%%............................... .......................%%%%1%+%%%%%%.%%%%.%%%%.%%%%............................... ........................%%%%%%%%%%%%.%%%%.%%%%.%%%%............................... .........................1%%%%%%%%%%.%%%%.%%%%.%%%%............................... ................................%%%%.%%%%.%%%%.%%%%............................... ................................%%%%.%%%%.%%%%.%%%%............................... ................................%%%%.%%%%.%%%%.%%%%............................... ................................%%%%.%%%%.%%%%.%%%%............................... ................................%%%%.%%%%+%%%%+%%%%............................... ...............................+%%%%+%%%%+%%%%+%%%%++............................. ...........................+++++%%%%+%%%%+%%%%+%%%%++++++......................... ........................++++++++%%%%+%%%%+%%%%+%%%%+++++++++...................... .......................+++++++++%%%%+%%%%+%%%%+%%%%++++++++++..................... .....................++++++++++%%%%++%%%%+%%%%++%%%%++++++++++.................... ....................+++++++++0%%%%1++%%%%+%%%%+++%%%%%+++++++++................... ....................+++++++++1%%11+++%%%%+%%%%+++11%%1++++++++++.................. ....................+++++++++++1111+%%%%+++%%%%+1111++++++++++++.................. .....................+++++++++++111%%%%1+++1%%%%111++++++++++++................... .....................+++++++++++1111+1111++11111111++++++++++++................... .......................+++++++++1111+1111+1111+1111++++++++++..................... ........................++++++++1111+1111+1111+1111++++++++....................... ...........................+++++1111+1111+1111+1111+++++1......................... ..............................++1111+1111+1111+1111++............................. ......................................+11+111+.................................... ..................................................................................