캔버스와 이미지를 서로 변환하기 위한 샘플 코드_html5 튜토리얼 기술

JS 캔버스를 이미지로 변환
원래 데모: JavaScript 캔버스 이미지 변환 데모
지난 주 Mozilla 웹 개발 컨퍼런스에서 우리는 하루의 대부분을 향후 Mozilla 시장 애플리케이션에 대해 논의하는 데 보냈습니다. 최근 가장 인기 있는 모바일 애플리케이션인 인스타그램은 무려 10억 달러에 페이스북에 매각되었습니다.
추가로 돈을 벌어도 괜찮으니 인스타그램 스타일 앱을 만들기로 했습니다(나중에 공유하겠습니다)

이 글에서는 이미지를 캔버스로 변환하는 방법과 캔버스에서 이미지를 추출하는 방법을 보여줍니다. 이미지.

이미지를 캔버스로 변환
이미지를 캔버스(아트보드, 캔버스)로 변환하려면 캔버스 요소 컨텍스트의 drawImage 메서드를 사용할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

// 이미지를 캔버스 객체로 변환
function ConvertImageToCanvas(image ) {
//캔버스 DOM 요소를 생성하고 너비와 높이를 이미지와 동일하게 설정합니다.
var canvas = document.createElement("canvas")
canvas.width = image.width;
canvas.height = image .height;
// 좌표(0,0)는 여기에서 시작한다는 의미로 오프셋과 동일합니다.
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}

캔버스를 이미지로 변환
이미지를 가정합니다. 캔버스에서 처리한 후 다음 방법을 사용하여 캔버스를 이미지 개체로 변환할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

// 이미지 이미지 추출 canvas
function ConvertCanvasToImage(canvas) {
//DOM으로 이해될 수 있는 새 Image 객체
var image = new Image()
// canvas.toDataURL은 Base64로 인코딩된 문자열을 반환합니다. 물론 URL은 브라우저 자체가
//PNG 형식 지정
image.src = canvas.toDataURL("image/png")
return image;

이미지를 캔버스로 변환하는 것은 생각보다 쉽습니다. 앞으로는 이러한 기술을 사용하여 많은 돈을 벌 수 있을 것이라고 믿습니다. 미래.