자바 스 크 립 트 로 Canvas 내용 을 그림 으로 바 꾸 는 방법

지난주 에 우 리 는 다음 모 질 라 마켓 플레이 스에 넣 을 애플 리 케 이 션 을 개발 하 는 데 반나절 이 걸 렸 다.인 스타 그램, 페 이 스 북 이 100 만 달러 를 들 여 인수 한 앱 이 있다.우리 도 100 만 달러 를 주머니 에 넣 고 싶 습 니 다. 인 스타 그램 스타일 의 애플 리 케 이 션 을 개발 하기 로 했 습 니 다. 이 글 은 한 장의 그림 을 canvas 에 복사 하 는 방법 과 반대로 캔버스 내용 을 그림 형식 으로 저장 하 는 방법 을 소개 합 니 다.
자 바스 크 립 트 를 사용 하여 그림 을 캔버스 에 복사 합 니 다.
캔버스 에 그림 을 넣 으 려 면 canvas 요소 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 매개 변수 캔버스 의 좌표 점 은 그림 이 이곳 으로 복사 된다.
자 바스 크 립 트 로 캔버스 를 그림 형식 으로 유지 합 니 다.
캔버스 에 있 는 작품 이 완성 되 었 다 면 다음 과 같은 간단 한 방법 으로 canvas 데 이 터 를 그림 형식 으로 변환 할 수 있 습 니 다.

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

이 코드 는 canvas 를 PNG 형식 으로 신기 하 게 바 꿀 수 있 습 니 다!
그림 과 캔버스 사이 에서 전환 하 는 기술 은 생각 보다 훨씬 간단 할 것 이다.앞으로 의 글 에서 나 는 이 그림 들 을 서로 다른 필터 로 처리 하 는 기술 을 쓸 것 이다.
전재 하 다 webhek