HTML5 캔버스 픽셀 처리 사용을위한 인터페이스 소개

컨텐츠 요약 :이 기사는 간단한 코드 예제와 약간 외설적 인 그림 데모를 통해 이미지 픽셀 데이터 작동에서 캔버스의 공통 인터페이스를 보여줍니다. 이러한 인터페이스를 사용하여보다 복잡한 효과를 달성하는 방법에 대해서는 후속 장에서 계속 논의 할 것입니다.

1. 캔버스 이미지 충전; 2. 캔버스 이미지 데이터 설정/GET; 3. 캔버스 이미지 데이터 생성; 4. Imagedata.data에 대한 약간의 보충; 5. 나중에 쓰십시오

/**

* @설명

* @param {number} x 이미지의 가장 왼쪽 지점에서 캔버스에서 드로잉 포인트를 시작하는 거리

* @param {number} y 캔버스 상단에서 그림을 그리는 이미지의 시작점 사이의 거리

* @param {number} 너비 캔버스에 그려진 최종 이미지의 너비

* @param {number} 높이 캔버스에 그린 최종 이미지의 높이

*/

Context.DrawImage (이미지, X, Y, 너비, 높이)

Demo_01은 다음과 같습니다.

<canvas id = draw_image_canvas 스타일 = 배경 : #ccc;> </canvas>

function $ (id) {return document.getElementById (id); }

함수 getImage (URL, 콜백) {

var img = document.createElement ( 'IMG');

img.onload = function () {

콜백 && 콜백 (this);

};

img.src = url;

document.body.appendChild (IMG);

}

함수 drawImage () {

var url = 'xiangjishi.png';

var canvas = $ ( 'draw_image_canvas');

var context = canvas.getContext ( '2d');

getImage (url, function (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, DrawHeight);

});

}

DrawImage ();

데모 설명 : xiangjishi.png를로드하십시오. 로드 후 캔버스의 왼쪽 상단 모서리에 대한 좌표 (0, 0)에서 시작하여 캔버스에 Xiangjishi.png를 그립니다. 효과는 다음과 같습니다.

이것을 보면, 당신은 context.drawImage (이미지, x, y, 너비, 높이)에서 네 가지 매개 변수의 의미를 이해하지 못할 수 있습니다. 효과를보기 위해 몇 가지 매개 변수를 단순히 수정할 수 있습니다.

var offsetx = 20;

var offsety = 20;

var drawwidth = img.width/2;

var drawheight = img.height/2;

Context.DrawImage (IMG, OffsetX, Offsety, DrawWidth, DrawHeight);

수정 된 데모 효과는 다음과 같습니다. 위의 API 설명과 결합하여 네 가지 매개 변수의 의미를 이해하는 것은 어렵지 않아야합니다.

Context.DrawImage (이미지, X, Y, 너비, 높이)

/**

* @description 캔버스의 특정 영역에 대한 픽셀 정보 받기

* @param {number} x 캔버스로부터 거리를 얻기 위해 정보의 가장 왼쪽 지점에서의 거리

* @param {number} y 정보를 위해 캔버스 상단에서 시작하는 거리

* @param {number} 너비는 얻은 너비입니다

* @param {number} 높이 최종 높이입니다

*/

context.getImageData (X, Y, 너비, 높이)

이 메소드는 세 가지 주요 속성을 갖는 이미지 데이터 객체를 반환합니다.

Imagedata.width : 라인 당 얼마나 많은 요소가 있습니까?

imageata.height : 열당 얼마나 많은 요소가 있습니까?

Imagedata.data : 캔버스에서 얻은 각 픽셀의 RGBA 값을 저장하는 1 차원 배열. 이 배열은 각 픽셀에 대해 빨간색, 녹색, 파란색 및 알파 투명성에 대해 네 가지 값을 저장합니다. 각 값은 0에서 255 사이입니다. 따라서 캔버스의 각 픽셀은이 배열에서 4 개의 정수 값이됩니다. 배열 채우기 순서는 왼쪽에서 오른쪽, 위에서 아래로입니다.

/**

* @description 특정 영역의 특정 영역의 픽셀 정보를 설정

* @param {number} x x 캔버스의 x 지점에서 설정 시작

* @param {number} y y 캔버스에서 설정 시작 시작

* @param {number} 너비는 얻은 너비입니다

* @param {number} 높이 최종 높이입니다

*/

context.putImagedata (imagedata, x, y)

다음은 demo_2를 결합하여 getImagedata ()의 사용법과 각 매개 변수의 해당 의미를 설명하는 것입니다.

Demo_02의 소스 코드는 다음과 같습니다. Demo_01을 기반으로 약간 수정됩니다.

<canvas id = "draw_image_canvas"style = "background : #cc;"> </canvas>

<canvas id = "get_image_canvas"style = "background : #cc;"> </canvas>

function getAndAndSetImagedAta () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ( 'draw_image_canvas'). width = img.width;

$ ( 'draw_image_canvas'). 높이 = img.height;

var context = $ ( 'draw_image_canvas'). getContext ( '2d');

Context.DrawImage (img, 0, 0, img.width, img.height);

// 픽셀 정보를 얻습니다

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);

// 픽셀 정보 설정, 여기에 특정 코드를 무시하고 위에서 얻은 픽셀 정보가 다른 캔버스에 그대로 표시됩니다.

var startx = 0;

var starty = 0;

var ct = $ ( 'get_image_canvas'). getContext ( '2d');

$ ( 'get_image_canvas'). 너비 = img.width;

$ ( 'get_image_canvas'). 높이 = img.height;

ct.putImagedata (imgagedata, startx, Starty);

});

}

이 시점에서, getImagedata 메소드의 4 가지 매개 변수에 해당하는 의미는 기본적으로 지울 수 있습니다. putimagedata 매개 변수를 이해하는 것은 어렵지 않습니다. DEMO_2 코드를 약간 수정 한 후에는 효과를 살펴본 후 알 수 있습니다.

function getAndAndSetImagedAta () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ( 'draw_image_canvas'). width = img.width;

$ ( 'draw_image_canvas'). 높이 = img.height;

var context = $ ( 'draw_image_canvas'). getContext ( '2d');

Context.DrawImage (img, 0, 0, img.width, img.height);

// 픽셀 정보를 얻습니다

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);

// 픽셀 정보를 설정합니다

var startx = img.width/2; // 이것은 원래 0입니다

var starty = img.width/2; // 이것은 원래 0입니다

var ct = $ ( 'get_image_canvas'). getContext ( '2d');

$ ( 'get_image_canvas'). 너비 = img.width;

$ ( 'get_image_canvas'). 높이 = img.height;

ct.putImagedata (imgagedata, startx, Starty);

});

}

Demo_3 디스플레이 효과는 다음과 같습니다. 그러나 몇 가지 매개 변수를 직접 변경하려고하면 더 잘 이해할 수 있습니다.

/**

* @description 이미지 데이터 세트를 사전 제작하고 캔버스 개체에 바인딩하십시오.

* @param {number} 너비는 너비에 의해 생성 된 너비입니다

* @param {number} 높이는 높이를 생성했습니다

*/

Context.CreateImagedata (너비, 높이)

인터페이스는 비교적 간단하며 생성 된 데이터는 getImagedata에서 얻은 데이터와 동일하게 처리 할 수 ​​있습니다. 이 이미지 데이터 세트가 반드시 현재 캔버스 상태를 반영 할 필요는 없다는 점에만 주목해야합니다.

또한 "HTML5 Advanced Programming"및 많은 기사에서 Imagedata.data는 배열로 간주되지만 실제로는 다음과 같습니다.

imagedata.data는 실제 배열이 아니라 클래스 배열의 객체를 반환하여 imagedata.data의 유형을 인쇄 할 수 있습니다.

Console.log (Object.prototype.tostring.call (imgagedata.data)); // 출력 : [Object UINT8ClampedArray]

그런 다음 imagedata.data의 특정 내용을 인쇄하십시오. 내용이 길다. 첫 번째 및 마지막 단락 만 볼 수 있습니다.

Imagedata.data는 실제로 인덱스가 0부터 시작하여 너비*높이*4-1로 끝나는 객체입니다.

어레이에 직접 저장하지 않겠습니까? 배열의 길이는 상한을 가지기 때문에 한계 길이라고 가정하면 한계 길이를 초과하는 요소는 키 값으로 저장됩니다. 예를 들어, Data [Limitlength + 100]는 실제로 데이터 [ 'Limitlength + 100 +' '] (Limitlength의 특정 값을 기억할 수 없습니다. 관심이 있으시면 확인할 수 있습니다).

마지막에 바이트 길이, 바이트 오프 세트 및 버퍼 특성에 관해서는, 우리는 깊이 조사하지 않았으며, 오해의 소지가있는 독자들을 막기 위해 여기에서 확장하지 않을 것입니다.

제한된 레벨, 오류가 있으면 지적하십시오.