HTML5 Canvas에 그림을 넣고 Pictures_html5 튜토리얼 팁으로 저장하는 방법

JavaScript를 사용하여 이미지를 캔버스에 복사

이미지를 캔버스에 넣기 위해 캔버스 요소의 drawImage 메서드를 사용합니다.

코드 복사

코드는 다음과 같습니다.

// 이미지를 캔버스로 변환하고 새로운 캔버스 요소를 반환합니다
함수 변환ImageToCanvas(이미지) {
var canvas = document.createElement("canvas");
캔버스.폭 = 이미지.폭;
캔버스.높이 = 이미지.높이;
canvas.getContext("2d").drawImage(image, 0, 0);

캔버스 반환;
}

여기서 0, 0 매개변수는 캔버스 위의 좌표점으로, 이 위치에 이미지가 복사됩니다.

JavaScript를 사용하여 캔버스를 이미지 형식으로 저장

캔버스 작업이 완료되면 다음과 같은 간단한 방법을 사용하여 캔버스 데이터를 이미지 형식으로 변환할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

// 캔버스를 이미지로 변환
함수 변환CanvasToImage(캔버스) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
이미지 반환;
}

이 코드는 마술처럼 캔버스를 PNG 형식으로 변환할 수 있습니다!

이미지와 캔버스 간 변환 기술은 생각보다 간단할 수 있습니다.