hada JSON配置海报生成
快速开始
直接使用npm安装
安装 hada-canvas-poster
npm i hada-canvas-poster
在 script 中引用组件：
import hadaCanvasPoster from 'hada-canvas-poster/components/HadaCanvasPoster2d.vue'
const drawData = {
"name": "模板5",
"width": 660,
"height": 384,
thumbnail: "https://v-cdn-xmsoqistatic.soqi.cn/card-thumbnail8.png",
"nodeElements": [
{
"name": "",
"resourceType": "image",
"url": "https://v-mp-server.soqicn.com/card_bg_image13.jpg",
"type": 1,
"css": {
"top": 42,
"left": 0,
"width": 660,
"height": 342,
"zIndex": 0,
"mode": "widthFix",
"borderRadius": 50
}
},
{
"name": "",
"resourceType": "image",
"url": "https://v-portrait.soqicn.com/e11a9237e3f9437d8e71b648f4cdc0c5.jpg-img120?t=20171220",
"type": 2,
"css": {
"top": 0,
"left": 55,
"width": 150,
"height": 150,
"zIndex": 0,
"borderRadius": 75,
"borderColor": "#F5F8F7",
"borderWidth": 6
}
},
{
"name": "",
"resourceType": "text",
"text": "搜小企",
"type": 3,
"css": {
"top": 64,
"left": 225,
"color": "#203F8A",
"zIndex": 0,
"textOverflow": "...",
"height": 32,
"font": "32rpx SimHei",
"width": 0,
"maxLine": "1",
"lineSpacing": 0
}
},
{
"name": "",
"resourceType": "text",
"text": "厦门搜企软件有限公司",
"type": 4,
"css": {
"top": 108,
"left": 224,
"color": "#203F8A",
"zIndex": 0,
"textOverflow": "...",
"height": 24,
"font": "24rpx SimHei",
"width": 0,
"maxLine": "1",
"lineSpacing": 0
}
},
{
"name": "",
"resourceType": "text",
"text": "工程部 | 高级工程师",
"type": 5,
"css": {
"top": 185,
"left": 55,
"color": "#203F8A",
"zIndex": 0,
"textOverflow": "...",
"height": 24,
"font": "24rpx SimHei",
"width": 0,
"maxLine": "1",
"lineSpacing": 0
}
},
{
"name": "手机图标",
"resourceType": "icon",
"d": "M515.485,47.097c-241.49,0-437.528,195.728-437.528,436.909\n\ts196.038,436.909,437.528,436.909s437.528-195.728,437.528-436.909S756.975,47.097,515.485,47.097z M712.14,644.484\n\tc-8.657,29.065-46.998,72.353-81.631,72.353h-2.472c-52.875-2.782-124.611-55.347-191.708-140.688l-24.736-31.54\n\tc-66.79-85.339-102.038-168.825-93.69-222.936c5.565-38.341,59.677-70.5,90.597-70.5c15.153,0,20.718,7.73,22.573,12.679\n\tc17.315,32.776,38.96,89.669,39.268,110.077v1.236l-0.617,1.546c-3.71,10.514-12.369,15.77-20.099,20.409\n\tc-9.895,5.875-15.77,9.895-16.387,21.026c-0.31,3.401,2.472,19.171,46.689,76.373l18.863,24.119\n\tc44.526,55.038,58.439,61.222,61.532,61.532c10.821,1.546,15.77-3.401,23.5-12.369c5.875-6.492,12.367-14.222,23.498-16.077h1.238\n\tl1.546,0.31c19.171,4.327,68.645,37.722,96.782,62.768C710.903,617.583,718.015,625.93,712.14,644.484z",
"type": 6,
"css": {
"top": 237,
"left": 55,
"width": 28,
"height": 28,
"color": "#203F8A",
"zIndex": 0
}
},
{
"name": "",
"resourceType": "text",
"text": "18321001454",
"type": 7,
"css": {
"top": 239,
"left": 91,
"color": "#20408A",
"zIndex": 0,
"textOverflow": "...",
"font": "24rpx SimHei",
"width": 0,
"height": 24
}
},
{
"name": "微信图标",
"resourceType": "icon",
"d": "M574.234,488.799c-11.133,0-20.099,9.585-20.099,21.643\n\tc0,12.06,8.966,21.645,20.099,21.645c11.131,0,20.097-9.585,20.097-21.645C594.331,498.385,585.365,488.799,574.234,488.799z\n\t M672.562,488.799c-11.131,0-20.099,9.585-20.099,21.643c0,12.06,8.968,21.645,20.099,21.645c11.131,0,20.097-9.585,20.097-21.645\n\tC692.659,498.385,683.693,488.799,672.562,488.799z M672.562,488.799c-11.131,0-20.099,9.585-20.099,21.643\n\tc0,12.06,8.968,21.645,20.099,21.645c11.131,0,20.097-9.585,20.097-21.645C692.659,498.385,683.693,488.799,672.562,488.799z\n\t M574.234,488.799c-11.133,0-20.099,9.585-20.099,21.643c0,12.06,8.966,21.645,20.099,21.645c11.131,0,20.097-9.585,20.097-21.645\n\tC594.331,498.385,585.365,488.799,574.234,488.799z M515.484,47.251c-241.491,0-437.527,195.419-437.527,436.6\n\ts196.036,436.909,437.527,436.909s437.529-195.728,437.529-436.909S756.974,47.251,515.484,47.251z M452.716,599.804\n\tc-25.046,0-48.546-4.329-69.881-12.06c-5.875,2.784-47.927,42.363-57.204,35.869c-6.492-5.875,14.843-48.855,16.698-56.276\n\tc-44.835-29.992-74.21-78.228-74.21-132.34c0-91.216,82.867-165.117,184.598-165.117c95.544,0,174.391,64.625,183.669,147.8\n\tc-4.02-0.617-8.349-0.617-12.679-0.617c-84.103,0-152.748,60.913-152.748,136.359c0,16.079,3.093,30.921,8.349,44.526\n\tC470.648,599.187,461.682,599.804,452.716,599.804z M706.883,654.843c1.236,5.875,17.625,38.341,12.679,42.671\n\tc-7.113,5.256-38.96-24.738-43.599-27.21c-15.77,5.875-34.012,9.276-52.875,9.276c-76.992,0-139.76-55.966-139.76-125.228\n\tc0-68.954,62.768-125.228,139.76-125.228c76.994,0,139.762,56.274,139.762,125.228C762.849,595.474,740.587,632.27,706.883,654.843z\n\t M672.562,488.799c-11.131,0-20.099,9.585-20.099,21.643c0,12.06,8.968,21.645,20.099,21.645c11.131,0,20.097-9.585,20.097-21.645\n\tC692.659,498.385,683.693,488.799,672.562,488.799z M574.234,488.799c-11.133,0-20.099,9.585-20.099,21.643\n\tc0,12.06,8.966,21.645,20.099,21.645c11.131,0,20.097-9.585,20.097-21.645C594.331,498.385,585.365,488.799,574.234,488.799z\n\t M517.339,405.004c15.151,0,26.901-12.986,26.591-28.756c0-16.079-12.058-29.066-26.591-29.066\n\tc-14.841,0-26.901,12.986-26.901,29.066C490.438,392.018,502.498,405.004,517.339,405.004z M387.781,347.182\n\tc-14.841,0-26.591,12.986-26.591,29.066c0,15.77,11.75,28.756,26.591,28.756c14.534,0,26.591-12.986,26.591-28.756\n\tC414.373,360.168,402.315,347.182,387.781,347.182z",
"type": 8,
"css": {
"top": 280,
"left": 55,
"width": 28,
"height": 28,
"color": "#203F8A",
"zIndex": 0
}
},
{
"name": "",
"resourceType": "text",
"text": "soqi1234",
"type": 9,
"css": {
"top": 281,
"left": 91,
"color": "#20408A",
"zIndex": 0,
"textOverflow": "...",
"font": "24rpx SimHei",
"width": 0,
"height": 24
}
},
{
"name": "导航图标",
"resourceType": "icon",
"d": "M515.485,47.097c-241.49,0-437.528,195.728-437.528,436.909\n\ts196.038,436.909,437.528,436.909s437.528-195.728,437.528-436.909S756.975,47.097,515.485,47.097z M531.564,723.331\n\tc-9.278,9.276-22.881,9.276-32.159,0c-59.367-59.677-169.444-166.044-169.444-287.871c0-109.151,82.867-197.583,185.214-197.583\n\tS701.009,326.31,701.009,435.46C701.009,556.669,588.767,664.891,531.564,723.331z M515.175,361.559\n\tc-38.341,0-69.881,32.466-69.881,73.901c0,41.742,31.54,74.827,69.881,74.827c38.341,0,69.881-32.466,69.881-73.901\n\tC585.056,394.645,553.517,361.559,515.175,361.559z",
"type": 10,
"css": {
"top": 320,
"left": 55,
"width": 28,
"height": 28,
"color": "#203F8A",
"zIndex": 0
}
},
{
"name": "",
"resourceType": "text",
"text": "厦门市思明区软件园二期观日路24号楼之二202室",
"type": 11,
"css": {
"top": 321,
"left": 91,
"color": "#20408A",
"zIndex": 0,
"textOverflow": "...",
"font": "24rpx SimHei",
"width": 514,
"height": 24,
"maxLine": "1"
}
}
],
"faces": [
{
"name": "mpInfoIcon",
"url": "https://at.alicdn.com/t/c/font_4181477_6u6eu4c3trv.ttf?t=1693296377618"
}
]
}
function nodeClick(nodes) {
console.log(nodes,'nodes')
}在 template 中使用组件：
<hada-canvas-poster :draw-data="drawData" @nodeClick="nodeClick"/>