• 引入
• addTextForImg(config)
• mergeMultiCanvasPic(config)
• createCanvasTable(config)

引入

import {
  addTextForImg,
  mergeMultiCanvasPic,
  createCanvasTable
} from 't-comm';

// or

import {
  addTextForImg,
  mergeMultiCanvasPic,
  createCanvasTable
} from 't-comm/lib/canvas/index';

addTextForImg(config)

描述：

为图片增加文字

参数：

参数名	类型	描述
config	Object	配置
config.width	number	宽度
config.height	number	高度
config.textList	Array<string>	文字列表，支持多行
config.imgPath	string	图片路径

返回: string

canvas.toDataURL生成的base64图片

示例

const imgUrl = addTextForImg({
  width: 300,
  height: 300,
  textList: ['第一行', '第二行'],
  imgPath: './test.png',
})

mergeMultiCanvasPic(config)

描述：

绘制多张图

参数：

参数名	类型	描述
config	object	输入参数
config.imgs	Array<string>	base64图片列表

返回: string

图片url

示例

mergeMultiCanvasPic({
  imgs: [img, img2, img3],
})

createCanvasTable(config)

描述：

创建canvas的table

参数：

参数名	类型	描述
config	object	输入配置
config.data	Array<object>	输入数据
config.headers	Array<string>	表头列表
config.cellWidthList	Array<number>	每一格的宽度列表
config.title	string	标题

返回: string

图片url

示例

const tableData = [
  {
    ProjectName: { name: 'ProjectName', value: 'ProjectA' },
    ALL_SUMMARY: {
      name: 'ALL_SUMMARY',
      value: 4987,
      ratio: '+26.2%',
      previousValue: 3953,
      idx: 0,
      lastIdx: 0,
      isMax: true,
      isMin: false,
      isSecondMax: false,
      isSecondMin: false,
    },
    ALL_FAIL: {
      // ...
    },
  },
  {
    ProjectName: { name: 'ProjectName', value: 'ProjectB' },
    // ...
  },
];

createCanvasTable({
  data: tableData,
  headers: getHeaders(tableData),
  title: `007日报 ${date}`,
  cellWidthList: [
    95,
    65,
    65,
    65,
  ],
});