캔버스 드로잉을 저장하는 방법은 무엇입니까?

Question

나는이 핑거 페인팅 앱을 보유하고 있으며 사용자가 그려 둔 것을 저장하고 나중에 다시 돌아와 계속 그리기를 원합니다.

이 방법을 사용하면 어떤 효과가 있습니까? 이 작업을 수행 할 수

Answer 1

한 가지 방법은 다음과 같습니다 base64로 같은

저장 캔버스의 내용이 canvas.toDataURL()를 호출하여 PNG 이미지를 인코딩하고 페이지의 localStorage에서 인코딩 된 문자열을 저장합니다.

캔버스를 복원하려면 이미지를 만들고 이전에 로컬에 저장된 값으로 src를 설정 한 다음 해당 이미지를 캔버스에 그립니다.

모든 드로잉 작업 기록, 로컬 또는 서버 세션 저장 및 다음에 페이지 방문시 '재생'과 같은 다른 방법이 있습니다.

Answer 2

HTML 저장 버튼 :

<input type="button" id="save" value="Save to PNG"> 

그런 다음 스크립트를

document.getElementById('save').onclick = function() { 
    window.location = document.getElementById("canvas").toDataURL('image/png'); 
    }; 

는 그런 다음 저장 한 이미지와 캔버스의 drawImage 메소드를 사용해야합니다. 어떻게/어디서 이미지를 저장하는지 (서버, 다운로드 폴더)는 다시로드 할 방법에 따라 다릅니다.

Answer 3

패브릭 js를 사용할 수 있습니다. JSON에 직렬화하는 데 도움이되는 메소드가 있으며이 JSON을 DB에 저장할 수 있습니다. documentation