Ví dụ chạy thật

Trang này nhúng bảng vẽ đúng như một ứng dụng bên ngoài sẽ làm, rồi hiện ra dữ liệu nhận được ở mỗi thao tác.

Bảng vẽ

Dữ liệu lấy ra

getDocumentJSON() trả về tài liệu để nạp lại về sau; toSVG() trả về hình tĩnh chèn thẳng vào HTML; toPNG() trả về Blob ảnh bitmap. Dữ liệu.

Nút setDocument() nạp lại đúng tài liệu vừa lấy ra ở lần bấm getDocumentJSON() gần nhất — bản vẽ quay về nguyên trạng lúc đó.

Chuyển giao từ thanh công cụ

Bảng vẽ này khởi tạo với exportMode: 'handoff', nên hai nút SVG và PNG trên thanh công cụ không tải tệp về máy mà trao dữ liệu cho trang. Bấm thử để xem gói dữ liệu nhận được.

Mã nguồn trang này

<div id="board"></div>

<script src="https://geogebra.vietify.vn/embed/math-canvas.js"></script>
<script>
  const board = MathCanvas.init('#board', {
    height: 520,
    exportMode: 'handoff',
  });

  board.on('export', (payload) => {
    // payload.format, payload.svg, payload.blob, payload.dataUrl, payload.document
  });
</script>