Canvas와 Image의 변환에 대해서

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

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

이미지를 캔버스로 변환

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

// 把image 转换为 canvas对象 
function convertImageToCanvas(image) { 
// 创建canvas 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 提取图片 image 
function convertCanvasToImage(canvas) { 
//新Image对象，可以理解为DOM 
var image = new Image(); 
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
// 指定格式 PNG 
image.src = canvas.toDataURL("image/png"); 
return image; 
}

이미지를 캔버스로 변환하는 것은 생각보다 쉽습니다. 앞으로는 이러한 기술을 사용하여 다양한 이미지 처리 기술을 보여드릴 것입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

HTML5에서 이미지 회전의 애니메이션 효과를 얻는 방법

HTML5 contenteditable 속성 분석

위 내용은 Canvas와 Image의 변환에 대해서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!