Resumo do conteúdo: Este artigo mostra a interface comum da tela na operação de dados de pixels de imagem por meio de exemplos de código simples e demos de imagem ligeiramente obsceno. Quanto a como usar essas interfaces para obter efeitos mais complexos, continuará sendo discutido nos capítulos subsequentes.
1. Preenchimento de imagem de tela; 2. Defina/obtenha dados de imagem de tela; 3. Crie dados de imagem de tela; 4. Um pequeno suplemento para imagedata.data; 5. Escreva mais tarde
1./**
* @descrição
* @param {número} x a distância do ponto mais à esquerda do ponto de desenho inicial da imagem da tela
* @param {número} y A distância entre o ponto de partida da imagem que desenha do topo da tela
* @param {número} largura A largura da imagem final desenhada na tela
* @param {número} altura A altura da imagem final desenhada na tela
*/
context.Drawimage (imagem, x, y, largura, altura)
Demo_01 é o seguinte:
<Canvas ID = draw_image_canvas style = background: #ccc;> </canvas>
função $ (id) {return document.getElementById (id); }
função getImage (url, retorno de chamada) {
var iMg = document.createElement ('img');
img.onload = function () {
retorno de chamada e retorno de chamada (this);
};
img.src = url;
document.body.appendChild (IMG);
}
função drawImage () {
var url = xiangjishi.png ';
var canvas = $ ('draw_image_canvas');
var context = Canvas.getContext ('2D');
getImage (url, função (img) {
canvas.width = img.width;
canvas.Height = img.Height;
var offsetx = 20;
var offsety = 20;
var drawwidth = img.width/4;
var drawheight = img.Height/4;
Context.Drawimage (IMG, OffsetX, Offsety, Drawwidth, Deftheight);
});
}
drawImage ();
Descrição da demonstração: Carregar xiangjishi.png. Após o carregamento, desenhe xiangjishi.png na tela que começa pelas coordenadas (0, 0) em relação ao canto superior esquerdo da tela. O efeito é o seguinte:
Vendo isso, você pode não entender o significado dos quatro parâmetros no contexto.Drawimage (imagem, x, y, largura, altura) ainda. Você pode simplesmente modificar alguns parâmetros para ver o efeito:
var offsetx = 20;
var offsety = 20;
var drawwidth = img.width/2;
var drawheight = img.Height/2;
Context.Drawimage (IMG, OffsetX, Offsety, Drawwidth, Deftheight);
O efeito de demonstração modificado é o seguinte. Combinado com a descrição da API acima, não deve ser difícil entender o significado dos quatro parâmetros.
context.Drawimage (imagem, x, y, largura, altura)
2. Obtenha/defina dados de imagem de tela/**
* @Description Obtenha informações de pixel para uma área específica de tela
* @param {número} x a distância do ponto mais à esquerda das informações para obter a distância da tela
* @param {número} y A distância inicial da parte superior da tela para obter informações
* @param {número} largura a largura obtida
* @param {número} altura A altura final
*/
context.getImagedata (x, y, largura, altura)
Este método retorna um objeto de imagem, que possui três propriedades principais:
ImagertaTa.Width: Quantos elementos existem por linha
IMAGEDATA.HEight: Quantos elementos existem por coluna
IMAGEDATA.DATA: Matriz unidimensional que armazena o valor RGBA de cada pixel obtido da tela. Essa matriz economiza quatro valores para cada transparência de pixels - vermelho, verde, azul e alfa. Cada valor está entre 0 e 255. Portanto, cada pixel na tela se torna quatro valores inteiros nesta matriz. A ordem de preenchimento da matriz é da esquerda para a direita, de cima para baixo.
/**
* @Description Defina as informações de pixel de uma área específica com uma imagem específica
* @param {number} X Iniciar a configuração do ponto X de tela
* @param {número} y Comece a definir a partir do ponto Y da tela
* @param {número} largura a largura obtida
* @param {número} altura A altura final
*/
Context.putImagedata (imagiagedata, x, y)
O seguinte é combinar demo_2 para explicar o uso de getImagedata () e o significado correspondente de cada parâmetro
O código -fonte do Demo_02 é o seguinte e é ligeiramente modificado com base no Demo_01:
<canvas id = "draw_image_canvas" style = "background: #cc;"> </canvas>
<canvas id = "get_image_canvas" style = "background: #cc;"> </lvas>
função getAndSetImagedata () {
var url = xiangjishi.png ';
getImage (url, função (img) {
$ ('draw_image_canvas'). width = img.width;
$ ('draw_image_canvas'). altura = img.Height;
var context = $ ('draw_image_canvas'). getContext ('2d');
context.Drawimage (img, 0, 0, img.width, img.Height);
// Obtenha informações de pixel
var offsetx = img.width/2;
var offsety = img.Height/2;
var getImgwidth = img.width/2;
var getImghEight = img.Height/2;
var imgagedata = context.getImagedata (Offsetx, Offsety, getImgWidth, getImghEight);
// Defina informações de pixel, ignore o código específico aqui primeiro, saiba que as informações de pixels obtidas acima são colocadas em outra tela intacta
var startx = 0;
var starty = 0;
var ct = $ ('get_image_canvas'). getContext ('2d');
$ ('get_image_canvas'). width = img.width;
$ ('get_image_canvas'). Height = img.Height;
ct.putImagedata (imgagedata, startx, starty);
});
}
O efeito Demo_2 Display é o seguinte :Nesse ponto, o significado correspondente aos quatro parâmetros do método getImagedata pode ser basicamente limpo. Não é difícil entender os parâmetros PutImagedata. Depois de modificar um pouco o código da Demo_2, você saberá depois de analisar o efeito.
função getAndSetImagedata () {
var url = xiangjishi.png ';
getImage (url, função (img) {
$ ('draw_image_canvas'). width = img.width;
$ ('draw_image_canvas'). altura = img.Height;
var context = $ ('draw_image_canvas'). getContext ('2d');
context.Drawimage (img, 0, 0, img.width, img.Height);
// Obtenha informações de pixel
var offsetx = img.width/2;
var offsety = img.Height/2;
var getImgwidth = img.width/2;
var getImghEight = img.Height/2;
var imgagedata = context.getImagedata (Offsetx, Offsety, getImgWidth, getImghEight);
// Defina informações de pixel
var startx = img.width/2; // Isso era originalmente 0
var starty = img.width/2; // Isso era originalmente 0
var ct = $ ('get_image_canvas'). getContext ('2d');
$ ('get_image_canvas'). width = img.width;
$ ('get_image_canvas'). Height = img.Height;
ct.putImagedata (imgagedata, startx, starty);
});
}
O efeito Demo_3 Display é o seguinte, mas se você tentar alterar alguns parâmetros, poderá ter um melhor entendimento:
3. Crie dados de imagem de tela/**
* @Description pré-crie um conjunto de dados de imagem e vinculam-os ao objeto de tela
* @param {número} largura criada por largura
* @param {número} altura criada em altura
*/
context.createImagedata (largura, altura)
A interface é relativamente simples e os dados criados podem ser processados da mesma forma que os dados obtidos com getImagedata. Só é preciso notar aqui que esse conjunto de dados de imagem pode não refletir necessariamente o estado atual da tela.
4. Alguns suplementos sobre imagedataAlém disso, em "HTML5 Programming Advanced" e em muitos artigos, Imagagata.data é considerada uma matriz, mas de fato:
ImagerAgedAtA.Data retorna não uma matriz real, mas um objeto de matriz de classe, que pode imprimir o tipo de imaganeta.data.
console.log (object.prototype.toString.call (imgagedata.data)); // saída: [Objeto UINT8ClampedArray]
Em seguida, imprima o conteúdo específico do imagedata.data. O conteúdo é longo. Somente o primeiro e os últimos parágrafos podem ser vistos:
ImagerAgedAtA.data é na verdade um objeto cujo índice começa de 0 e acaba com largura*altura*4-1.
Por que não armazená -lo diretamente em matrizes? Como o comprimento da matriz possui um limite superior, assumindo que seja o comprimento limite, os elementos que excedem o comprimento do limite são armazenados nos valores -chave. Por exemplo, os dados [LimitLength + 100] são na verdade dados ['LimitLength + 100 +' '] (não me lembro do valor específico do comprimento limite, se estiver interessado, pode conferir)
Quanto ao comprimento, byteoffset e propriedades buffers no final, não investigamos em profundidade e não o expandiremos aqui para evitar leitores enganosos.
5. Escreva na parte de trásNível limitado, aponte se houver algum erro