2015-01-01 4 views
0

fabricjs 캔버스 드로잉 만화를 사용하는 앱을 만들고 있습니다. Canvas에는 직사각형, svg 객체 및 jpeg 이미지와 같은 일부 객체가 포함되어 있습니다. 편집이 완료되면 캔버스를 서버 (nodejs)에 저장해야하며 나중에 작성자 또는 다른 뷰어가 서버에서 다시로드해야합니다. 캔버스를 svg 문자열로 serialize하고 서버에 svg 문자열을 저장하고 캔버스에 하나씩 서버에 이미지를 업로드 할 수 있다고 생각했습니다. 나중에 svg 문자열을로드하여 이미지 URL을 다운로드 한 사진으로 바꾸고 캔버스를 다시로드하십시오.서버에 fabricjs 캔버스 저장 및로드

내 질문은 다음과 같습니다. 1- 이것이 내 목표를 달성하는 올바른 방법입니까? 2 나는 캔버스가 사용자 장치 (모니터, 스마트 폰, ...)에 따라 크기가 다르기 때문에이 모든 작업을 수행하기 때문에 확장 성을 위해 svg를 사용하기로했습니다. 그러나, 어떻게 새로운 캔버스에 원래의 SVG 문자열을 스케일링 모르겠다.

감사합니다,

답변

0
  1. 는 SVG에 저장하지 마십시오. SVG는 수출용입니다. 전화 myCanvas.toObject()
  2. SVG를 캔버스의 지속성 형식으로 사용하는 경우 SVG의 확장 성을 어떻게 활용할 것인지 잘 모릅니다. 그러나 SVG에서 렌더링하려고한다면 말이됩니다.

이미지 솔루션을 너무 과장하고있을 수 있습니다. 어떻게 캔버스에 이미지를 넣을 것인가? 내가하는 일은 이미지를 내 서버에 업로드하도록하는 것입니다. 그런 다음 이미지 브라우저에서 이미지를 선택할 수있게했습니다. 그들이 선택한 이미지에는 이미 URL이 있으므로 저장/복원 할 때 남은 일은 없습니다.

+0

개체 또는 JSON으로 내보내는 것이 유용하거나 확장 가능한 이유는 무엇입니까? 같이 개체가 50,50 너비 100 및 높이 200, 더 큰 화면에서 내가 저장된 json을로드 할 때 그것은 여전히 ​​같은 크기라고 가정 해 봅니다. 그래서, 아마, 스케일링은 JSON을 위해 관리되어야한다고 생각합니다. 그것은 svg에서도 가능합니다. 그리고 실제로, 나는 그것을하는 법을 모르겠다. 지금 나는 단지 svg를 렌더링한다. 사용자가 캔버스에 너무 많은 그림을 넣을 수 있으며 모든 것을 먼저 업로드 할 수는 없습니다. 모바일 앱이므로 사진이 카메라에서 나옵니다. 많은 것들을 업로드하고 시간을 절약하고 데이터를 낭비 할 수 없습니다. – Behrooz

+0

HTML 및 JS 형식 인 경우 파일 API를 사용하여 이미지 입력에서 이미지 바이트를 가져와 데이터 URI가있는 이미지 요소를 소스로 생성해야합니다. 그렇다면 이미지 데이터가 이미 JSON (또는 SVG - 데이터 URI를 SVG로 serialize 할 수 있는지 기억이 안납니다) –