HTML5 Canvas 이미지 추출, 픽셀 정보 획득, 히트 감지

오늘은 캔버스에서 더욱 강력한 기능들을 주로 소개합니다

예를 들어 캔버스 내용을 그림으로 추출
캔버스의 픽셀 정보를 얻고 수정
하고 히트를 캔버스 감지
우선 캔버스를 만들어야 합니다

<canvas id="myCanvas" width=500 height=500></canvas>

이미지 추출

먼저 분명히 해야 할 것은
toDataURL()이 환경 객체가 아닌 캔버스 객체 자체의 메소드
캔버스의 내용을 이미지(base64 인코딩)로 추출하는 메소드입니다.
사용 방법을 살펴보겠습니다

캔버스를 이미지로 변환

저와는 아무런 관련이 없습니다. 캔버스는 태극권 도표를 만들었습니다
js 코드는 다음과 같습니다

let canvas = document.getElementById('myCanvas');
let cxt = canvas.getContext('2d');
let l = canvas.width/2;
const PI = Math.PI;
cxt.translate(l, l);let createTaiChi = () => {
    cxt.clearRect(-l, -l, l, l);
    cxt.arc(0, 0, l, 0, 2*PI, 0);
    cxt.stroke();
    cxt.beginPath();
    cxt.arc(0, -l/2, l/2, -PI/2, PI/2, 0);
    cxt.arc(0, l/2, l/2, 3/2*PI, PI/2, 1);
    cxt.arc(0, 0, l, PI/2, PI*3/2, 0);
    cxt.fill();
    cxt.beginPath();
    cxt.fillStyle = '#fff';
    cxt.arc(0, -l/2, l/7, 0, PI*2, 0);
    cxt.fill();
    cxt.beginPath();
    cxt.fillStyle = '#000';
    cxt.arc(0, l/2, l/7, 0, PI*2, 0);
    cxt.fill();
};

createTaiChi();

그리고 CSS를 사용하여 연속 회전처럼 보이게

#myCanvas {    
width: 250px;    
height: 250px;    
margin: 100px;    
animation: rotate 3s linear infinite;
}@keyframes rotate{
    0% {        
    transform: rotateZ(0);    
    }
    100% {        
    transform: rotateZ(360deg);    }}

여기서 설정한 CSS 너비와 높이는 캔버스의 원래 너비보다 두 배 더 넓습니다
(이렇게 하면 캔버스가 더 선명해집니다).

---

다음으로 캔버스에 그린 태극권 다이어그램을 그림으로 변환하겠습니다
먼저 캔버스의 base64 인코딩을 가져와야 합니다

let data = canvas.toDataURL();console.log(data);

여기서는 콘솔에서 인쇄하여 어떻게 보이는지 확인합니다

그림으로 바꾸고 싶습니다.
img 태그를 만든 다음 설정하기만 하면 됩니다. src to data

let img = document.createElement('img');
img.src = data;document.body.appendChild(img);

이때 페이지에 정적 태극권 다이어그램이 추가로 있음을 알 수 있습니다
크기는 캔버스의 너비/와 동일합니다. 높이 속성은 500과 같습니다. ×500

동일 출처 정책 제한

이 방법은 동일 출처 정책에 의해 제한됩니다
예를 들어 페이지에 로컬 이미지를 추가
한 다음 이 그림은 캔버스에 그려집니다

let img = document.getElementsByTagName('img')[0];
cxt.drawImage(img, 0, 0);let data = canvas.toDataURL();

브라우저에서 오류가 보고됩니다

로컬 서버를 사용하는 경우 이 방법을 사용할 수 있습니다
증명 이 메소드가 허용됨 동일 출처 정책 제한

픽셀 정보

캔버스 픽셀 정보를 얻으려면 getImageData(x, y, dx, dy)를 사용하십시오.
메소드는 환경에 의해 호출됩니다. object (we are cxt here)
(동일 출처 정책 적용)
처음 두 매개변수는 이미지 정보를 얻기 위한 시작 좌표이고, 마지막 두 매개변수는 이미지 정보의 너비와 높이입니다.
(직사각형 그리기 함수와 유사)
이 메소드는 ImageData 객체를 반환합니다(픽셀 정보 배열 데이터 및 너비/높이 포함)
주로 이 객체의 data 속성을 사용합니다

캔버스 크기는 500×500
캔버스의 모든 픽셀 정보를 얻는 방법은 다음과 같습니다.

console.log(cxt.getImageData(0, 0, 500, 500).data);

우리는 이 배열의 길이가 100w입니다

---

캔버스에 4개의 픽셀이 있는 경우
각 픽셀 정보는 RGBA의 4가지 값으로 나뉩니다
그 다음 배열 길이는 4×4 = 16이어야 합니다
각각
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A

---

여기 캔버스의 총 크기는 500×500 = 25w 픽셀
따라서 픽셀 정보 배열 크기는 25w×4 = 100w입니다

createImageData(너비, 높이) 메소드
를 사용할 수도 있습니다. 빈 imageData 개체 만들기

let blankImg = cxt.createImageData(250, 250);
console.log(blankImg);

---

putImageData(imgData, x, y)를 사용하여 원본 캔버스를 이미지 픽셀로 덮습니다.
imgData는 imgData 개체입니다. , x, y 는 오버레이의 시작 좌표입니다
예를 들어 위와 같이 넣으면 생성된 250×250 빈 이미지가 원본 캔버스를 덮습니다

cxt.putImageData(blankImg, 0, 0);

히트 감지

isPointInPath()는 픽셀이 경로 영역 내에 있는지 감지할 수 있습니다
사용법은 매우 간단합니다.

cxt.rect(100, 100, 300, 300);if(cxt.isPointInPath(200, 200)){
    cxt.stroke();}

---

isPointInStroke()는 픽셀이 켜져 있는지 감지하는 데 사용됩니다. 경로는 비슷하지만
호환성이 별로 좋지 않습니다

위 내용은 HTML5 Canvas 이미지 추출, 픽셀 정보 획득, 적중 감지 등 자세한 내용은 PHP를 참고해주세요. 중국사이트(www.php.cn)!