fabricjs
FabricJS 캔버스 직렬화

Angular 2 AngularJS CSS HTML html5-canvas JavaScript jQuery Node.js PHP SVG
수색…


소개

FabricJS를 사용하여 응용 프로그램을 작성한 후에는 캔버스 / 그 내용의 결과를 서버에 저장해야한다는 것을 알게되면 늦지 않습니다. 또는 파일을 클라이언트로 내보낼 수도 있습니다. 이 목적을 위해 캔버스 직렬화 가 필요합니다. 이제 여러분 중 일부는 왜 직렬화를 이미지로 저장할 수 있는지 물어볼 것입니다. 그래서 답은 서버에 이미지를 저장하는 것이 대역폭과 텍스트를 필요로하는 경우입니다.

통사론

  1. JSON.stringify (캔버스) - 전달 된 객체에서 toJSON 메서드를 암시 적으로 호출합니다. 문자열 표현을 제공합니다.
  2. canvas.toObject () - toSSON 과 같은 표현을 반환하며, 실제 객체의 형태로만 나타납니다.
  3. canvas.toSVG () - 캔버스의 SVG 표현을 반환합니다.

비고

FabricJS 캔버스 직렬화에 대한 자세한 내용은 Canvas Serialization 링크를 참조하십시오.

캔버스 세럼 라이 제이션

<canvas id = "canvas" height='400' width='500'></canvas>

var canvas = new fabric.Canvas(document.getElementById('canvas'));
console.log(JSON.stringify(canvas)); // '{"objects":[],"background":""}'

canvas.add(new fabric.Rect({
  left: 10,
  top: 10,
  height: 50,
  width: 50,
  fill: 'green',
     stroke:'black'
}));
canvas.renderAll();

console.log(JSON.stringify(canvas));//logs the string representation
console.log(canvas.toObject());//logs canvas as an object
console.log(canvas.toSVG());//logs the SVG representation of canvas

깡깡이



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow