캔버스 및 이미지는 서로 샘플 코드를 변환합니다

의견 :이 기사에서는 이미지를 캔버스로 변환하는 방법과 이미지를 추출하는 방법을 보여줍니다. 샘플 코드는 다음과 같습니다. 이 필요가있는 친구는 그것을 언급 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.

원래 데모 : JavaScript 캔버스 이미지 변환 데모

지난주 Mozilla Web Development Conference에서 우리는 미래의 Mozilla Market 응용 프로그램에 대해 대부분의 하루를 보내는 데 결국 하루 종일 소비했습니다. Instagram은 최근 가장 인기있는 모바일 앱으로 10 억 달러의 하늘 높은 가격으로 Facebook에 판매되었습니다.

나는 여분의 돈을 벌지 않아서 Instagram 스타일 앱을 만들기로 결정했습니다 (나중에 공유 할 것입니다).

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

이미지를 캔버스로 변환하십시오

이미지를 Canvas (Artboard, Canvas)로 변환하려면 Canvas 요소 컨텍스트의 DrawImage 메소드를 사용할 수 있습니다.

// 이미지를 Canvas 객체로 변환합니다

함수 convertimagetocanvas (image) {

// 캔버스 dom 요소를 만들고 너비와 높이를 그림과 동일하게 설정합니다.

var canvas = document.createElement ( "캔버스");

canvas.width = image.width;

Canvas.height = image.height;

// 좌표 (0,0)는 여기에서 도면을 표시하며 이는 오프셋과 동일합니다.

canvas.getContext ( "2d"). DrawImage (image, 0, 0);

반환 캔버스;

}

캔버스를 이미지로 변환합니다

이미지가 캔버스에서 처리되었다고 가정하면 다음 방법을 사용하여 캔버스를 이미지 이미지 객체로 변환 할 수 있습니다.

// 캔버스에서 이미지를 추출합니다

함수 convertCanVastOimage (캔버스) {

// 새 이미지 객체는 DOM으로 이해할 수 있습니다

var image = new Image ();

// canvas.todataurl은 base64 인코딩 된 URL을 반환합니다. 물론 브라우저 자체는이를 지원해야합니다.

// 형식 PNG를 지정합니다

image.src = canvas.todataurl ( "image/png");

리턴 이미지;

}

음! 이미지 이미지와 캔버스의 변환은 생각보다 쉽습니다. 앞으로 나는 여러분에게 다른 이미지 처리 기술을 보여줄 것입니다. 앞으로이 기술로 많은 돈을 벌게 될 것이라고 생각합니다.