Exemplo
Criar um ImageData objeto 100 * 100 pixels, onde cada pixel é vermelho, 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 navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
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 (from 0-255)
G - A cor verde (from 0-255)
B - A cor azul (from 0-255)
A - O canal alfa (from 0-255; 0 is transparent and 255 is fully visible)
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 é 4 vezes o tamanho do objecto ImageData: largura altura * * 4. (Uma maneira mais fácil de encontrar o tamanho da matriz, é usar ImageDataObject.data.length)
A matriz contendo a informação de cor / alfa é armazenado na dados de propriedade do objecto ImageData.
Tip: 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.
Examples:
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 objecto ImageData com as dimensões especificadas (em pixels):
| sintaxe JavaScript: | var imgData = context . createImageData( width,height ) ; |
|---|
2. Isto cria um novo objecto ImageData com as mesmas dimensões que o objecto especificado por anotherImageData (this does not copy the image data) :
| sintaxe JavaScript: | var imgData = context . createImageData( imageData ) ; |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição |
|---|---|
| width | A largura do novo objeto ImageData, em pixels |
| height | A altura do novo objeto ImageData, em pixels |
| imageData | objeto anotherImageData |
<Object Canvas