Manual de referência HTML

大全 de etiquetas HTML

Método putImageData() do canvas HTML

putImageData() é Canvas 2O D API desenha dados de um objeto ImageData existente em um bitmap. Se um retângulo desenhado for fornecido, apenas os pixels desse retângulo serão desenhados. Este método não é afetado pela matriz de transformação da tela.

HTML canvas reference manual

Exemplo online

O código a seguir usa getImageData() para copiar os dados de pixels de um retângulo especificado na tela, e depois usa putImageData() para colocar os dados de imagem de volta na tela:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do método getImageData() no HTML canvas-Tutorial básico(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="15" style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
　　　　var imgData=ctx.getImageData(10,10,50,50);
　　　　ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">Copiar</button>
</body>
</html>

Teste para ver ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam o método putImageData().

Atenção:Internet Explorer 8 Versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método putImageData() coloca os dados de imagem (de um objeto ImageData especificado) de volta na tela.

Tip:See getImageData() Método que pode copiar os dados de pixels de um retângulo especificado na tela.

Tip:See createImageData() A method that can create a new blank ImageData object.

JavaScript syntax

JavaScript syntax:	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

Parameter value

Parameter	Description
imgData	Specify the ImageData object to be placed back on the canvas.
x	The x coordinate of the top-left corner of the ImageData object, in pixels.
y	The y coordinate of the top-left corner of the ImageData object, in pixels.
dirtyX	Optional. The horizontal value (x), in pixels, of the position where the image is placed on the canvas.
dirtyY	Optional. The vertical value (y), in pixels, of the position where the image is placed on the canvas.
dirtyWidth	Optional. The width used to draw an image on the canvas.
dirtyHeight	Optional. The height used to draw an image on the canvas.

　HTML canvas reference manual

HTML: <template> tag