Exemplo
Criar um 100*100 ImageData objeto pixels, onde cada pixel é vermelha, e colocá-lo para a tela:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10); Tente você mesmo " Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| createImageData() | sim | 9 | sim | sim | sim |
Definição e Uso
O createImageData() método cria um novo, objeto ImageData em branco. valores de pixel do novo objeto são preto transparente por padrão.
Para cada pixel em um objeto ImageData há quatro peças de informação, os valores RGBA:
R - A cor vermelha (0-255)
G - A cor verde (0-255)
B - A cor azul (0-255)
A - O canal alfa (0-255; 0 é transparente e 255 é totalmente visível)
Então, preto transparente indica: (0,0,0,0) .
A informação de cor / alfa é realizada em uma matriz, e uma vez que a matriz contém 4 partes de informação para cada pixel, o tamanho da matriz é de 4 vezes o tamanho do objecto ImageData: largura altura * * 4. (Uma maneira mais fácil de encontrar o tamanho da matriz, é a utilização de ImageDataObject.data.length)
A matriz contendo a informação de cor / alfa é armazenado na data de propriedade do objecto ImageData.
Dica: Depois de ter manipulado as informações de cor / alpha na matriz, você pode copiar os dados de imagem de volta para a tela com a putImageData() método.
Exemplos:
A sintaxe para fazer o primeiro pixel nas ImageData objeto vermelho:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;A sintaxe para fazer o segundo pixel na ImageData objeto verde:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;JavaScript Sintaxe
Existem duas versões do createImageData() Método:
1. Isto cria um novo objeto ImageData com as dimensões especificadas (em pixels):
| sintaxe JavaScript: | var imgData=context.createImageData(width,height); |
|---|
2. Isto cria um novo objeto ImageData com as mesmas dimensões do objeto especificado pelo anotherImageData (isso não copiar os dados de imagem):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição |
|---|---|
| width | A largura do novo objecto ImageData, em pixels |
| height | A altura do novo objecto ImageData, em pixels |
| imageData | objeto anotherImageData |