HTML5 Canvas 픽셀 처리 인터페이스 소개_html5 튜토리얼 기술

내용 요약: 이 기사에서는 간단한 코드 예제와 약간 형편없는 그림 데모를 통해 이미지 픽셀 데이터 작업에서 캔버스의 일반적인 인터페이스를 보여줍니다. 보다 복잡한 효과를 얻기 위해 이러한 인터페이스를 사용하는 방법에 대해서는 다음 장에서 계속 설명할 것입니다.
1. 캔버스 이미지 채우기, 3. 캔버스 이미지 데이터 생성, 4. imageData.data에 대한 몇 가지 추가 사항,
1. 이미지 채우기

코드 복사

코드는 다음과 같습니다.

/**
* @description
* @param {Number} x 이미지의 그리기 시작점과 캔버스의 가장 왼쪽 사이의 거리
* @param {Number} y 그리기 시작점 사이의 거리 이미지와 캔버스 상단
* @param {Number} width 캔버스에 그려진 최종 이미지의 너비
* @param {Number} height 캔버스에 그려진 최종 이미지의 높이
*/
context.drawImage(image, x, y, width, height)

demo_01은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다 :

function $(id) { return document.getElementById(id) }
function getImage(url, callback){
var img = document.createElement('img') ;
img.onload = function( ){
콜백 && 콜백(this)
img.src =
document.body.appendChild(img); >}
function 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(image, x의 네 가지 매개 변수의 의미를 명확하게 이해하지 못할 수도 있습니다. , y, 너비, 높이) 몇 가지 매개변수를 수정하면 효과를 확인할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var offsetX = 20;

var offsetY = 20;

var drawWidth = img.width/2
var drawHeight/2 ;
context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);


위의 API 설명과 결합하면 다음과 같습니다. 4개의 매개변수의 의미

코드 복사

코드는 다음과 같습니다.

context.drawImage(image, x, y, width, height)

2. 캔버스 이미지 데이터 가져오기/설정

코드 복사

코드는 다음과 같습니다.

/**

* @description 캔버스 특정 영역의 픽셀 정보를 가져옵니다

* @param {Number} x 정보를 가져오는 시작점과 캔버스의 가장 왼쪽 부분 사이의 거리
* @param {Number} y 정보를 얻는 시작점 캔버스 위에서 시작 거리
* @param {Number} width 구한 너비
* @param {Number} height 최종 높이
*/
context .getImageData(x, y, width, height)


이 메소드는 주로 세 가지 속성을 갖는 ImageData 객체를 반환합니다.
imageData.width: 각 행에 몇 개의 요소가 있는지

imageData.height: 각 열에 몇 개의 요소가 있는지
imageData.data: 캔버스에서 얻은 각 픽셀의 RGBA 값을 저장하는 1차원 배열입니다. 이 배열은 각 픽셀에 대해 빨간색, 녹색, 파란색 및 알파의 네 가지 값을 보유합니다. 각 값은 0에서 255 사이입니다. 따라서 이 배열에서는 캔버스의 각 픽셀이 4개의 정수 값이 됩니다. 배열은 왼쪽에서 오른쪽으로, 위에서 아래로 채워집니다.

코드 복사

코드는 다음과 같습니다.

/**
* @description 특정 imageData를 사용하여 캔버스 특정 영역의 픽셀 정보를 설정합니다.
* @param {Number} x 캔버스의 x 지점에서 설정
* @param {Number} y 캔버스의 y 지점에서 설정 시작
* @param {Number} width 너비 가져오기
* @param {Number} height 최종 높이
*/
context.putImageData(imageData, x, y)

다음은 데모_2를 사용하여 getImageData() 및 각 매개 변수 해당 의미
DEMO_02 소스 코드는 다음과 같으며, 데모_01을 기반으로 약간 수정되었습니다.

코드 복사

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다:

function getAndSetImageData(){
var url = 'xiangjishi.png';
getImage(url, function(img){
$(' draw_image_canvas').width = img.width;
$('draw_image_canvas').height = img.height
var context = $('draw_image_canvas').getContext('2d'); .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').width = img.width;
$('get_image_canvas').height = img.height; imgageData, startX , startY);
})
}

demo_2 표시 효과는 다음과 같습니다
:

이 시점에서 getImageData 메소드의 네 가지 매개변수의 의미를 기본적으로 명확하게 알 수 있습니다. putImageData 매개변수를 이해하는 것은 어렵지 않습니다.

코드를 복사하세요 코드는 다음과 같습니다.

function getAndSetImageData(){

var url = 'xiangjishi.png'
getImage(url, function(img){
$ ('draw_image_canvas') .width = img.width;
$('draw_image_canvas').height = 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').width = img.width;
$('get_image_canvas').height = img.height; startX, startY);
}


demo_3 표시 효과는 다음과 같지만 몇 가지 매개변수를 직접 변경해 보면 더 잘 이해할 수 있습니다.

3. 캔버스 이미지 데이터 생성

코드 복사

코드는 다음과 같습니다.

/*** @description 이미지 데이터 세트를 미리 생성해 캔버스 객체에 바인딩합니다 * @param {Number} width 생성된 너비 * @param {Number} height 생성된 높이

*/

context.createImageData(width, height)

인터페이스는 비교적 간단하며, 생성된 데이터는 다음과 같이 생성될 수 있습니다. getImageData로 얻은 데이터는 동일한 방식으로 처리됩니다. 여기서 주목해야 할 점은 이 이미지 데이터 세트가 반드시 캔버스의 현재 상태를 반영하지는 않는다는 것입니다.

4. imageData에 대한 몇 가지 추가 사항

"HTML5 고급 프로그래밍" 및 많은 기사에서 imageData.data는 배열로 취급되지만 실제로는

코드 복사


코드는 다음과 같습니다.

imageData.data는 실제 배열이 아니라 배열과 유사한 객체를 반환합니다. imageData.data의 유형은
console.log(Object)로 출력할 수 있습니다. .prototype .toString.call(imgageData.data)); //출력: [object Uint8ClampedArray]

그런 다음 imageData.data의 특정 내용을 인쇄합니다. 내용은 길고 앞 부분만 있습니다. 위 섹션에서 다음을 볼 수 있습니다.
imageData.data는 실제로 객체이고 해당 인덱스는 0에서 시작하여 너비*높이*4-1로 이동합니다.

배열에 직접 저장하면 어떨까요? 배열의 길이에는 상한이 있기 때문에,limitLength라고 가정하면,limitLength를 초과하는 요소는 data[limitLength 100]이 실제로는 data['limitLength 100'']와 같이 키 값의 형태로 저장됩니다. LimitLength의 구체적인 값을 기억하세요. 관심 있는 어린이도 확인할 수 있습니다.
마지막에 있는 byteLength, byteOffset, buffer 속성은 자세히 연구되지 않았으므로 독자의 오해를 방지하기 위해 여기에서 확장하지 않겠습니다. .
5. 뒤에 적어주세요
레벨 제한이 있으니 오류가 있으면 지적해주세요