HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas getImageData() 메서드

getImageData()는 canvas 영역의 숨겨진 픽셀 데이터를 설명하는 ImageData 객체를 반환하며, 이 영역은 다각형으로 표현되며, 시작점은 (sx, sy), 너비는 sw, 높이는 sh입니다.

在线示例

다음 코드는 getImageData()를 사용하여 캔버스에서 지정된 다각형의 픽셀 데이터를 복사하고, putImageData()를 사용하여 이미지 데이터를 캔버스에 다시 배치합니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas getImageData() 메서드 사용-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" height="150" style="border:1px solid #d3d3d3">
您的浏览器不支持 HTML5　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()">복사</button>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome 및 Safari는 getImageData()를 지원합니다. 메서드.

주의: Internet Explorer 8 이전 버전은 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

getImageData() 메서드는 ImageData 객체를 반환하며, 이 객체는 캔버스에서 지정된 다각형의 픽셀 데이터를 복사합니다.

주의:ImageData 객체는 이미지가 아니며, 캔버스의 일부(다각형)를 정의하고 해당 다각형 내 각 픽셀의 정보를 저장합니다.

ImageData 객체의 각 픽셀에 대해, RGBA 값이 네 가지 정보가 있습니다:

R - 빨간색(0-255)
G - 녹색(0-255)
B - 파란색(0-255)
A - alpha 채널(0-255; 0은 투명합니다255 완전히 보이는 것입니다)

color/alpha 정보는 배열 형태로 존재하며 ImageData 객체에 저장됩니다. data 속성에서.

提示：배열의 color/alpha 정보 이후에, 다음을 사용할 수 있습니다. putImageData() 메서드는 이미지 데이터를 캔버스에 복사합니다.

예제:

다음 코드는 반환된 ImageData 객체의 첫 번째 픽셀의 color를 얻을 수 있습니다./alpha 정보:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas getImageData() 메서드 사용-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" height="150" style="border:1px solid #d3d3d3">
您的浏览器不支持 HTML5　canvas 태그.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx=c.getContext(2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
var imgData=ctx.getImageData(30,30,50,50);
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
alert(red　+　" "　+　green　+　" "　+　blue　+　" "　+　alpha);
</script>
</body>
</html>

테스트를 보세요 ‹/›

提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

　　　　　　　　red=255-old_red;
green=255-old_green;
blue=255-old_blue;

JavaScript 문법

JavaScript 문법：	context.getImageData(x,y,width,height);

参数值

参数	描述
x	开始复制的左上角位置的 x 坐标（以像素计）。
y	开始复制的左上角位置的 y 坐标（以像素计）。
width	要复制的矩形区域的宽度。
height	要复制的矩形区域的高度。

要使用的图像：

在线示例

使用 getImageData() 来反转画布上的图像的每个像素的颜色：

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas getImageData() 메서드 사용-基础教程(oldtoolbag.com)</title>
</head>
<body>
<img id="scream" src="views.png">
<canvas id="myCanvas" width="3" height="2" style="border:1px solid #d3d3d3">
您的浏览器不支持 HTML5　canvas 태그.
</canvas>
<script>
document.getElementById("scream").onload=function()
{
　　　　var　c=document.getElementById("myCanvas");　　　　　var　ctx=c.getContext("2d");
　　　　var　img=document.getElementById("scream");
　　　　ctx.drawImage(img,0,0);
　　　　var　imgData=ctx.getImageData(0,0,c.width,c.height);
　　　　//　색상 반전
　　　　for　(var　i=0;i<imgData.data.length;i+=4)
　　　　{
　　　　　　　　imgData.data[i]=255-imgData.data[i];
　　　　　　　　imgData.data[i+1]=255-imgData.data[i+1];
　　　　　　　　imgData.data[i+2]=255-imgData.data[i+2];
　　　　　　　　imgData.data[i+3]=255;
　　　　}
　　　　ctx.putImageData(imgData,0,0);
};
</script>
</body>
</html>

테스트를 보세요 ‹/›

HTML canvas 참조 가이드

HTML: <template> 태그