지난 주에 우리는 Mozilla 마켓플레이스에 올릴 다음 앱을 개발하는 데 반나절을 보냈습니다. 현재 매우 인기 있는 애플리케이션이 있는데, 바로 Facebook이 이를 인수하는 데 100만 달러를 지출한 것입니다. 우리도 100만 달러를 주머니에 넣고 싶어서 인스타그램 스타일의 애플리케이션을 개발하기로 결정했습니다. 이번 글에서는 이미지를 캔버스에 복사하는 방법과 캔버스 콘텐츠를 이미지로 저장하는 방법을 소개하겠습니다. .
데모 보기
이미지를 캔버스에 넣으려면 캔버스 요소의 drawImage
메서드를 사용합니다. drawImage
方法:
// Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; }
这里的0, 0
// Converts canvas to an image function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; }여기
0, 0
매개변수 캔버스의 좌표점, 이미지가 이 위치로 복사됩니다. JavaScript를 사용하여 캔버스를 이미지 형식으로 유지캔버스 작업이 완료되면 다음과 같은 간단한 방법을 사용하여 캔버스 데이터를 이미지 형식으로 변환할 수 있습니다. rrreee
이 코드는 마술처럼 캔버스를 PNG 형식으로 변환할 수 있습니다. ! 데모 보기이미지와 캔버스 간 변환 기술은 생각보다 간단할 수 있습니다. 향후 기사에서는 이러한 이미지에 다양한 필터를 적용하는 몇 가지 기술에 대해 쓸 것입니다.추천 튜토리얼: "javascript 비디오 튜토리얼
"🎜위 내용은 JavaScript를 사용하여 Canvas 콘텐츠를 이미지로 변환하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!