引入

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

// 不支持 tree-shaking 的项目
import {
  compressBase64Img,
  addTextForImg,
  mergeMultiCanvasPic,
  createCanvasTable
} from 't-comm/lib/canvas/index';

// 只支持 ESM 的项目
import {
  compressBase64Img,
  addTextForImg,
  mergeMultiCanvasPic,
  createCanvasTable
} from 't-comm/es/canvas/index';

compressBase64Img(base64Img, options)

描述：压缩 base64 图片

• 通过 canvas 缩放图片到指定最大宽度，并转为 JPEG 格式降低体积

参数：

参数名	类型	描述
base64Img	string	base64 图片字符串（可带或不带 data:image 前缀）
options	object	压缩选项
options.maxWidth	number	最大宽度，默认 280
options.quality	number	JPEG 质量 0-1，默认 0.8

返回: Promise.<string>

压缩后的 base64 图片字符串

示例

const compressed = await compressBase64Img(base64Str, { maxWidth: 280, quality: 0.8 });

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,
  ],
});