合图引擎基于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‘))