合圖引擎基於json資料 解析，比較與htmltocanvas 先生成html再生成canva的解決方案， 渲染過程更可控，定製化成都高。

import Dev from '@ali/hetuCanva/dist/dev';

const data = {
  "name": "draw edit action",
  "width": 375,
  "height": 850,
  "layers": [
    {
      "name": "bg-layer",
      "materials": [
        {
          "type": "IMAGE",
          "style": {
            "x": 0,
            "y": 0,
            "width": 375,
            "height": 850,
            "src": "https://img.alicdn.com/tfs/TB1Itzu4AL0gK0jSZFtXXXQCXXa-1500-3400.png"
          }
        }
      ]
    },
    {
      "name": "items-bg-list-layer",
      "materials": [
        {
          "type": "RECTANGLE",
          "style": {
            "x": 15,
            "y": 143,
            "width": 170,
            "height": 170,
            "color": "#f0f0f0"
          }
        },
        {
          "type": "RECTANGLE",
          "style": {
            "x": 190,
            "y": 143,
            "width": 170,
            "height": 170,
            "color": "#f0f0f0"
          }
        },
        {
          "type": "RECTANGLE",
          "style": {
            "x": 15,
            "y": 318,
            "width": 170,
            "height": 170,
            "color": "#f0f0f0"
          }
        },
        {
          "type": "RECTANGLE",
          "style": {
            "x": 190,
            "y": 318,
            "width": 170,
            "height": 170,
            "color": "#f0f0f0"
          }
        },
        {
          "type": "RECTANGLE",
          "style": {
            "x": 15,
            "y": 493,
            "width": 170,
            "height": 170,
            "color": "#f0f0f0"
          }
        },
        {
          "type": "RECTANGLE",
          "style": {
            "x": 190,
            "y": 493,
            "width": 170,
            "height": 170,
            "color": "#f0f0f0"
          }
        }
      ]
    },
    {
      "name": "items",
      "materials": [
        {
          "type": "IMAGE",
          "style": {
            "x": 15,
            "y": 143,
            "width": 170,
            "height": 170,
            "src": "https://img.alicdn.com/tfs/TB1u75srIVl614jSZKPXXaGjpXa-580-335.png",
            "size": "contain",
            "position": "top",
          }
        },
        {
          "type": "IMAGE",
          "style": {
            "x": 190,
            "y": 143,
            "width": 170,
            "height": 170,
            "src": "https://img.alicdn.com/tfs/TB1u75srIVl614jSZKPXXaGjpXa-580-335.png",
            "size": "contain",
            "position": "bottom",
          }
        },
        {
          "type": "IMAGE",
          "style": {
            "x": 15,
            "y": 318,
            "width": 170,
            "height": 170,
            "src": "https://img.alicdn.com/tfs/TB1rf72rggP7K4jSZFqXXamhVXa-352-614.png",
            "size": "contain",
            "position": "left",
          }
        },
        {
          "type": "IMAGE",
          "style": {
            "x": 190,
            "y": 318,
            "width": 170,
            "height": 170,
            "src": "https://img.alicdn.com/tfs/TB1rf72rggP7K4jSZFqXXamhVXa-352-614.png",
            "size": "contain",
            "position": "right",
          }
        },
        {
          "type": "IMAGE",
          "style": {
            "x": 15,
            "y": 493,
            "width": 170,
            "height": 170,
            "src": "https://img.alicdn.com/tfs/TB1rf72rggP7K4jSZFqXXamhVXa-352-614.png",
            "size": "contain",
            "position": "center",
          }
        },
        {
          "type": "IMAGE",
          "style": {
            "x": 190,
            "y": 493,
            "width": 170,
            "height": 170,
            "src": "https://img.alicdn.com/tfs/TB1u75srIVl614jSZKPXXaGjpXa-580-335.png",
            "size": "contain",
            "position": "center",
          }
        }
      ]
    }
  ]
}

const engine = new Dev({
  data: data,
});

engine.render(document.querySelector('#example'))