향후 사용을 위해 캔버스 저장

Question

저는 HTML5/JS 영역에 비교적 익숙하지 않습니다. 어쩌면 내가하고 싶은 일이 아주 간단 할 수도 있습니다.

가 나는 사용자의 관점에서 다음과 같은 요구 사항이 있습니다 사용자는 캔버스에 일부 도면을하지

을하고 페이지를 떠난다. 그가 돌아 오면, 선입견이 복원되어야하고 사용자가 추첨을 진행할 수 있습니다.

내가 지금까지 가지고 :

• 드로잉 부분 자체
• 이미지로 캔버스를 저장할 수있는 가능성 -> 그것은 더 이상 편집 할 수 없습니다 이후이 suitalbe되지 ...

그래서 내가 필요한 것은 현재 도면을 백엔드로 보내고 거기에 저장하고 페이지가 다시 액세스되면 다시로드하고 다시 그리는 방법을 찾는 것입니다. 백엔드로 데이터를 보내는 방법과 데이터를 검색하는 방법은 분명합니다. 따라서 주요 질문은 다음과 같습니다.

• 캔버스에서 그림을 가져 오는 방법은 무엇입니까?
• 이미 도면이있는 경우 다시 그리는 방법은 무엇입니까?

감사합니다.

Answer 1

아약스 호출 (예 : 5 초마다)을 생성하고 도면을 보내는 간격을 설정해야한다고 생각합니다. 따라서 서버와의 연결이 끊어 지더라도 도면에 대한 백업이 있습니다. 또는 더 나은 방법은 localStorage를 사용하여 도면을 저장할 수 있습니다. 나는 localStorage를 사용할 것이므로 좋다고 생각합니다.

도면을 얻으려면 getImageData 함수를 사용할 수 있습니다. 여기에서 그것에 대해 읽을 수 있습니다 : http://www.w3schools.com/tags/canvas_getimagedata.asp.

다시 그리기 위해 사용자가 페이지를 입력하면 putImageData 함수를 사용할 수 있습니다. 여기에서 읽을 수 있습니다 : http://www.w3schools.com/tags/canvas_putImageData.asp. 당신이 백엔드 서버를 사용하지 않는 경우 http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/ http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/

Answer 2

는, 클라이언트 양면 스토리지 옵션입니다 : 당신이 여기 읽을 수있는이 기술에 대해 -

또 다른 해결책은 toDataURL을 사용하는 것입니다.

사용 context.getImageData는 a binary representation of the image content있는 구조를 가져온 다음 localstorage.setItem("savedImage", imagedata)와 localstorage에 저장합니다.

웹 사이트가로드되면 localstorage에서 imagedata를 var imagedata = localstorage.getItem("savedImage")으로로드하고 putImageData으로 캔버스에 놓습니다. 사용자가 처음으로 웹 사이트를 방문하거나 그 동안 로컬 저장소를 지우면 imagedata는 null이됩니다.