HTML5 Canvas 픽셀 처리

HTML5 Canvas 픽셀 처리의 createImageData() 함수 사용 방법, 온라인 예제를 통해 canvas 픽셀 처리를 시연하고, 픽셀을 캔버스에 복사하는 방법 및 문법 정의와 그 속성 값 자세한 정보 등.

可以访问HTML5画布的各个像素。您可以使用ImageData对象来执行此操作。该ImageData对象包含一个像素数组。通过访问此数组，您可以操纵像素。完成像素操作后，需要将像素复制到画布上以显示它们。

创建一个ImageData对象

创建ImageData对象是使用2D上下文功能完成的createImageData()。这是一个示例:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width =　100;
var height =　100;
var imageData = context.createImageData(width,        height);

函数的width和height属性createImageData()设置由所ImageData创建对象表示的像素区域的宽度和高度（以像素为单位）。上面的示例创建了一个ImageData具有100 x 100像素面积的对象。

ImageData属性

该ImageData对象具有三个属性:

• width

• height

• data

width和height属性包含所述图形数据区的宽度和高度。
该data属性是一个包含像素值的字节数组。

像素处理

　data数组中的每个像素都包含4个字节的值。红色，绿色和蓝色为一个值，alpha通道为一个值。像素的颜色是通过将红色，绿色和蓝色混合在一起以构成最终颜色来确定的。Alpha通道说明像素的透明度。红色，绿色，蓝色和Alpha值中的每一个都可以采用0到255之间的值。
这是设置第一个像素的颜色和Alpha值的代码示例:

var pixelIndex = 0;
imageData.data[pixelIndex        ] =　255;　　//　red
imageData.data[pixelIndex　+　1] =         0;　　//　green 색
imageData.data[pixelIndex　+　2] =         0;　　//　blue 색
imageData.data[pixelIndex　+　3] =　255;

请在以下代码中读取像素值:

var pixelIndex = 0;
var red = imageData.data[pixelIndex        ];　　//　red
var green = imageData.data[pixelIndex　+　1];　　//　green 색
var blue = imageData.data[pixelIndex　+　2];　　//　blue 색
var alpha = imageData.data[pixelIndex　+　3];

다음 픽셀의 pixelIndex 값을 참조하려면, 그 값을 증가시켜야 합니다4각 픽셀은4개의 배열 요소로 구성되어 있습니다. 위와 같이).
주어진 픽셀의 인덱스를 계산할 수 있습니다:

　var index =　4　*　(x　+　y　*　width);

의 x와 y는 계산에서는 x와 픽셀의 y 좌표를 사용하여 인덱스로 계산됩니다. 데이터 배열에서 픽셀은 긴 픽셀 시퀀스로 조직되며, 왼쪽 상단에서 시작하여 수직으로 오른쪽으로 이동합니다. 행의 끝에 도달하면, 픽셀 시퀀스는 아래 행의 가장 왼쪽 픽셀에서 계속하여 오른쪽으로 이동합니다. 따라서 x 위치에 있는 픽셀의 인덱스를 계산하려면, y 좌표를 행의 픽셀 수로 곱하여 x 값을 추가해야 합니다.
이는 설명20 픽셀 너비와8ImageData 픽셀 배열의 높이를 나타내는 그림입니다. 오른쪽 여백에 각 행의 픽셀 인덱스가 열리게 됩니다.如您가 볼 수 있듯이, 인덱스는 왼쪽 상단에서 0부터 시작하여 오른쪽으로 증가합니다. 행의 끝에 도달하면, 인덱스는 아래 행의 가장 왼쪽 픽셀에서 계속하여 오른쪽으로 증가합니다.

픽셀을 캔버스에 복사합니다

픽셀 처리가 완료되면,2D 컨텍스트 함수는 putImageData()에 복사합니다. putImageData()는 두 버전이 있습니다. putImageData() 함수의 첫 번째 버전은 모든 픽셀을 캔버스에 복사합니다. 이는 예제입니다:

var canvasX =　25;
var canvasY =　25;
context.putImageData(imageData, canvasX, canvasY);

canvasX와 canvasY 매개변수는 X와 Y를 의미하며, 픽셀을 캔버스에 삽입할 위치의 y 좌표입니다.
putImageData() 함수의 두 번째 버전은 픽셀의 사각형 대신 모든 픽셀을 캔버스에 복사합니다. 이는 코드 예제입니다:

var canvasX =　25;
var canvasY =　25;
var sx = 0;
var sy = 0;
var sWidth =　25;
var sHeight =　25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

sx와 sy 매개변수는 원본 X와 원본 Y를 의미하며, 픽셀 배열에서 복사됩니다.
sWidth와 sHeight 매개변수(sourceWidth과 sourceHeight)은 복사할 픽셀 배열의 너비와 높이를 의미합니다.

canvas에서 픽셀을 가져오기

화면에서 하나의 픽셀 사각형을ImageData 객체에 잡을 수도 있습니다. 이는getImageData() 함수를 사용하여 완료됩니다. 예제는 다음과 같습니다:

var x =　　25;
var y =　　25;
var width =　100;
var height =　100;
var imageData2　= context.getImageData(x, y, width, height);

x와 y 매개변수는 화면 모서리의 왼쪽 상단에서 시작하는 좌표를 의미합니다.
의 width와 height 매개변수는 화면 모서리의 너비와 높이를 의미합니다.