>웹 프론트엔드 >H5 튜토리얼 >HTML5 Canvas에 그림을 넣고 Pictures_html5 튜토리얼 팁으로 저장하는 방법

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

WBOY
WBOY원래의
2016-05-16 15:47:551262검색

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 형식으로 변환할 수 있습니다!

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.