更新于 2020.07.29 杭州有赞电商团队急缺 10+ HC，覆盖前端，java，测试，有意向的欢迎联系~ lvdada@youzan.com 或者直接联系 wx：wsldd225
旧状
我们的业务涉及电商、教育行业，出于营销以及功能需要，会有很多卡片展示（长按保存）的需求，或者分享长图的需求。以及我们有面向商家的PC端，商家端又能编辑、实时预览卡片的样式。
同样的卡片内容我们需要在两端以两种框架（vue react）分别维护。
考虑到依赖太大（ungzipped 160kb+）、稳定性、可维护性、可拓展性等因素，我们没有采用 html2canvas 这个第三方转换库。而是采用抽离一系列 canvas-utils 的方式进行 canvas 画图。
因为 canvas 原生的绘图 api 都是以绝对定位的像素点，再辅以尺寸信息进行绘制。
比如：
ctx.rect(x, y, width, height); // 画矩形
ctx.drawImage(img, destx, desty, destWidth, destHeight); // 画图片
所以我们定义的 canvas-utils 入参也必须包含这些位置、尺寸信息。
/**
* 绘制圆角矩形
*
* @param {*} ctx 画布
* @param {Number} radius 半径
* @param {Number} x 左上角
* @param {Number} y 左上角
* @param {Number} width 宽度
* @param {Number} height 高度
* @param {String} color 颜色
* @param {String} mode 填充模式
* @param {Function} fn 回调函数
*/
export function drawRoundedRectangle() {}
/**
* 绘制图片(方、圆角、圆)
*
* @param {*} ctx 画布
* @param {*} img load好的img对象
* @param {Number} x 左上角定点 x 轴坐标
* @param {Number} y 左上角定点 y 轴坐标
* @param {Number} w 宽
* @param {Number} h 高
* @param {Number} radius 圆角半径
*/
export function drawImage() {}
/**
* 绘制多行片段
*
* @param {*} ctx 画布
* @param {*} content 内容
* @param {*} x 绘制左下角原点 x 坐标
* @param {*} y 绘制左下角原点 y 坐标
* @param {*} maxWidth 最大宽度
* @param {*} fontSize 字体大小
* @param {*} fontFamily 字体家族
* @param {*} color 字体颜色
* @param {*} textAlign 字体排布
* @param {*} lineHeight 设置行高
* @param {*} maxLine 最大行数
*/
export function drawParagraph() {}
/**
* 创建一个画布
*
* @param {*} width 宽
* @param {*} height 高
* @return {*} canvasAndCtx 画布相关信息
*/
export function initCanvasContext(width, height) {
return [canvas, ctx];
}
这四个核心方法涵盖了几乎所有海报画图类需求，图片、段落文字、背景容器、画布创建。并且已经把 canvas 相关的 api 收拢了，开发者无需关注恼人的 canvas api，只需要在设计稿上量好尺寸以及位置，就能将对应的元素绝对定位到画布上。
大概业务中的实现（伪代码）：
Promise.all([
canvasUtils.loadUrlImage(mainCoverImg),
canvasUtils.loadBase64Image(cardInfo.qrCode),
])
.then(([cover, qrCode, shopnameIcon, titleIcon]) => {
const [canvas, ctx] = canvasUtils.initCanvasContext(325, 564);
// 绘制底框
canvasUtils.drawRoundedRectangle(ctx, ...sizeMapValue.base);
// 绘制封面图
canvasUtils.drawImage(ctx, ...sizeMapValue.cover);
// 绘制标题
canvasUtils.drawParagraph(ctx, ...sizeMapValue.title);
// 绘制题数
canvasUtils.drawImage(ctx, ...sizeMapValue.titleIcon);
// ...
return canvas.toDataURL('image/png');
})
因为图片的入参是个 img 对象，需要先 load 图片链接，这里就有个异步的过程，所以设计之初就规定先 Promise.all 所有图片拿到 img 再进行画图操作。
采用这种方式画海报能实现基本需求，但也有一定局限性。
比如：
- 画图前需要先 load 图片地址，涉及异步，这是比较冗余的操作
- 一直调
draw***方法，传相似的参数，这也是冗余操作，采用 json 配置参数会不会更好？ - 如果生成图片的高度需要自适应多个子元素的高度？这需要写很多额外逻辑。
- 如果两种不同样式的文字横向居中显示？又要疯狂的计算再传入 x y 定位，总之涉及到自适应样式的需求我们就得在逻辑中频繁的计算。
那么，如何改善这些问题，在前端更优雅地画海报呢？
如何定义 schema
不使用 html2canvas 还有个原因是该库基于 htmlElement，公司现状下 jsx 和 vue 模板语法不兼容，无法复用代码片段，还有个更重要的原因是小程序没法用，那么采用什么类型的 schema 去收敛 api，以及最大化在不同平台兼容？
这里采用了 json 的形式去配置化参数生成图片。
基础 schema：
{
type: '',
css: {},
custom: null, // 自定义回调
}
之前的核心 drawImage drawParagraph drawRoundedRectangle 方法目的就是绘制 图片、文字、容器，对于这三个类型分别有不同的额外配置，需要不同的更具语义化的 schema。
图片：
{
type: 'image',
css: {},
url: '',
mode: 'fill | contain',
custom: null,
};
文字：
{
type: 'text',
css: {},
text: '',
custom: null,
};
容器：
{
type: 'div',
css: {},
mode: 'div | line',
children: [],
custom: null,
}
type 为 div 类型的 schema 相当于是个容器，具有 children 字段，与 html 中的 div 概念也类似，div 可以嵌套承载更多的 div、text、image，共同构建一颗完整的节点树。
用 json schema 去描述一张卡片的伪代码：
{
type: 'div',
css: {},
children: [
{
type: 'div',
css: {},
children: [
{
type: 'text',
css: {},
text: '文字一'
},
{
type: 'image',
css: {},
url: 'cdn.image.com/test1',
mode: 'contain'
}
]
},
{
type: 'text',
css: {},
text: '好多文字 好多文字 好多文字'
},
]
}
使用 json schema 去描述视图，已经解决了之前 canvas-utils 方案的几个局限性。
画图前需要先 load 图片地址，涉及异步，这是比较冗余的操作
传入给 image 的是 url 地址或者是 base64字符串，load 图片的操作会在内部实现，外部无需关心。
一直调 draw*** 方法，传相似的参数，这也是冗余操作，采用 json 配置参数会不会更好？
所有的方法调用被 type 替代，原先必传的 尺寸、位置信息
canvasUtils.drawParagraph(ctx, cardInfo.title, 14, 380, 285, 14, undefined, undefined, undefined, 20, 2);
被 css 字段代替：
{
type: 'text',
css: {
width: '285px',
height: '14px',
x: '14px',
y: '380px',
...
},
text: cardInfo.title,
custom: null,
};
绝对定位的布局系统的缺陷
现在的 schema 定义在实现的功能上跟之前的 canvas-utils 本质上没什么区别，只是简化了使用姿势，所有的节点都是按照绝对定位，我们需要手动传入所有节点的尺寸信息（width height）以及位置信息（x y），现在市面是几乎所有类似 jsonToCanvas 的类库都是这样设计，但这样并不能解决我们提到的几个局限性。
- 如果生成图片的高度需要自适应多个子元素的高度？这需要写很多额外逻辑。
- 如果两种不同样式的文字横向居中显示？又要疯狂的计算再传入 x y 定位，总之涉及到自适应样式的需求我们就得在逻辑中频繁的计算。
比如说下图的样式，横向布局，有不同的文字大小以及样式，而且文字的个数还是自定义的：
这三个节点我们都要实时计算 width height x y，再传入 css 字段，工作量还是巨大的。
既然我们的 schema 在描述图片结构上（嵌套）的向 html 靠齐，那么我们 css 字段 的 schema 为什么不向真实的 css 靠齐？
借助 margin 块状流式布局，借助 inline-block 横向布局，将之前的绝对定位改成 css 默认的 相对定位，模拟 css 的能力。
更重要的是模拟实现 css属性 的强大继承能力，这样我们在定义某个节点的 css 属性时，就不用把各种属性再写一遍，直接依赖父节点css属性的继承。
暴露给用户使用的 schema 需要足够智能，把需求计算的需求在组件内部吃掉。
原本的定义：
{
"type": "div",
"css": {
"width": "200px",
"height": "200px",
"x": "0px",
"y": "0px",
},
"children": [
{
"type": "text",
"css": {
"width": "动态计算",
"height": "动态计算",
"x": "动态计算",
"y": "动态计算",
"fontSize": "12px"
},
"text": "自定义文案："
},
{
"type": "text",
"css": {
"width": "动态计算",
"height": "动态计算",
"x": "动态计算",
"y": "动态计算",
"fontSize": "16px",
"color": "red"
},
"text": "我后面跟这张图片"
},
{
"type": "image",
"css": {
"width": "15px",
"height": "15px",
},
"url": "https://su.yzcdn.cn/public_files/2018/12/14/61d0dad50c5b2789a0232c120ae5f7fa.jpg",
"mode": "contain"
}
]
}
更智能的定义：
{
"type": "div",
"css": {
"width": "200px",
"height": "200px",
},
"children": [
{
"type": "text",
"css": {
"display": "inline-block",
"marginTop": "3px",
},
"text": "自定义文案："
},
{
"type": "text",
"css": {
"display": "inline-block",
"fontSize": "16px",
"color": "red"
},
"text": "我后面跟这张图片"
},
{
"type": "image",
"css": {
"width": "15px",
"height": "15px",
"display": "inline-block"
},
"url": "https://su.yzcdn.cn/public_files/2018/12/14/61d0dad50c5b2789a0232c120ae5f7fa.jpg",
"mode": "contain"
}
]
}
我们可以看到优化后的版本并不需要指定文字的宽度高度，也不用指定图片的位置信息，就跟写原生 css html 一致。
优化 css schema 来处理动态尺寸的需求
既然要靠齐 css 的能力，那 css schema 的定义也就要参照 css2.1 规范进行，我们定义的 css schema 是 css2.1 规范的子集。
那我们去寻找规范中有哪几个集合是适用我们的 case。
box model
涉及到盒模型相关的 css 属性
export interface IBoxModel {
marginLeft: string;
marginRight: string;
marginTop: string;
marginBottom: string;
borderWidth: string;
borderColor: string;
borderStyle: 'solid' | 'dashed';
borderRadius: string | undefined;
boxShadow: string | undefined;
customVerticalAlign: 'down' | 'top' | 'center';
customAlign: 'left' | 'right' | 'center';
}
visual formatting model
可视格式化模型也是 css 规范中除了 盒模型（box model）外最为重要的模型，他描述了基于盒模型的元素是如何排列在可视化窗口中的，比如 position 来描述是绝对定位还是相对定位。display: block | inline-block 用来描述纵向排列还是横向排列。
摘取部分需要的属性：
export interface IVisFormatModel {
width: string;
height: string;
maxWidth: string | undefined;
maxHeight: string | undefined;
minWidth: string;
minHeight: string;
position: 'absolute' | 'relative';
top: string | undefined;
left: string | undefined;
right: string | undefined;
bottom: string | undefined;
display: 'block' | 'inline-block';
}
Colors and Backgrounds
用来描述颜色和背景
export interface IColorAndBg {
color: string;
backgroundColor: string;
}
Fonts
用来描述单个文字的具体样式，大小、字体等。
export interface IFonts {
lineHeight: string | undefined; // line-height 应该属于 visual formatting model，但与传统的 css 不太一样，我们规定在无法在 div 中写文字
fontStyle: string;
fontFamily: string;
fontWeight: number;
fontSize: string;
}
Text
与 Fonts 不同，这个规范是为了描述文字之前的排列行为，比如对其方式，是否有中划线等。
export interface IText {
textAlign: 'left' | 'right' | 'center';
lineClamp: number | undefined; // 不在 css2.1 规范内，方便描述几行文字拦截展示 【...】
textDecoration: 'line-through' | undefined;
}
画图库的实现过程，计算盒模型
不管我们的 css schema 定义的如何对用户友好，在组件内部最终调用 canvas api 的时候我们还是需要传入绝对定位的尺寸以及位置。
定义好了元素类型的 schema 以及 css 的 schema，需要实现的就是在组件内部根据节点的 css属性 计算各个节点的盒模型尺寸，再由最终的盒模型数据，绘制出最终的 canvas。
整体流程：
根据 css 计算得到盒模型数据，是画图库代码量最大的步骤。以下就是计算盒模型的计算流程。
const defaultConfig = canvasWrap.setDefault(copyConfig);
const inlineBlockConfig = canvasWrap.setInlineBlock(defaultConfig);
const widthConfig = canvasWrap.addWidth(inlineBlockConfig);
const heightConfig = canvasWrap.addHeight(widthConfig);
const originConfig = canvasWrap.addOrigin(heightConfig);
setDefault 设置默认值
因为 schema 允许部分字段不传，所以第一步递归遍历传入的数据源，将默认值赋值给入参。
setInlineBlock 将 inline-block 的元素修改结构
如图所示，setInlineBlock 方法会将连续排列的 inline-block 节点聚合，新建一个空白的 div 插入原先的位置，然后将这些 inline-block 节点作为 children 插入其中，这样做的目的在于方便后面的 width height 计算。
addWidth 计算所有节点的宽
遍历所有节点，如果发现是有 children 的 div，则继续递归遍历。
模拟原生 css 特性，如果当前节点设置了 width，则取当前宽，否则取父节点计算完的宽。
当然还有许多 css 属性会影响到 width 最终的计算，比如 minWidth maxWidth，又比如子节点元素是否都是 inline-block。
再比如当前的 type 为 text，而且又没有设置 width，这里就得调用 canvas 提供的 ctx.measureText(content).width; 去获取 width。
计算完的 width 会结合 margin，border 等 css 属性再次计算各种盒模型宽。
const sumWidth = calRealdemension(sumWidth, [css.minWidth, css.maxWidth]);
const layerWidth = sumPixels(sumWidth, marginWidth);
const contentWidth = minusPixels(sumWidth, addedBorderWidth);
addBoxWidth(element, sumWidth);
addLayerWidth(element, layerWidth);
addContentWidth(element, contentWidth);
这里会将计算完的数据直接赋值给当前 config 对象，这样在递归到下一层 children 时就可以直接使用父节点 width 了。
addHeight 计算所有节点的高
与计算宽度大同小异，这里不再赘述。
addOrigin 计算所有节点的位置
既然已经计算得出所有节点的尺寸信息，同样递归遍历所有的节点，以父节点为基准就能计算得到所有子节点的位置信息。
绘制 canvas 图片
const images = canvasWrap.getImages(originConfig);
images.then(imgMap => {
resolve(canvasWrap.drawCanvas(originConfig, imgMap));
})
得到所有节点的位置、尺寸信息，再结合统一 load 的图片信息，最后就可以使用 canvas-utils 中的绘制方法，进行图片绘制了。
自定义插槽 custom
最后再提一下定义 schema 时预留的 custom 字段，可以传回调函数进去，暴露出来的参数为 ctx，用来调用 canvas 绘制 api，以及该节点的盒模型数据，这样用户就能知道当前节点的范围。
custom(canvas, ctx, config) {
ctx.beginPath();
ctx.moveTo(config.origin.x, config.origin.y);
ctx.lineTo(50, 40);
ctx.stroke();
},
canvas 绘图的注意点
生成图片模糊问题
当我们直接给 canvas 设定 width，height 时，比如
<canvas width="200" height="200"></canvas>
这实际告诉浏览器的是以位图（bitmap）的形式生成一张 200x200 物理像素点的画布，我们可以直接看成是一张图片。
如果没有人为的用 css 指定这张画布的逻辑宽高，那么浏览器默认会设置成 200px x 200px。
我们可以直接想象成将一张 200x200 的位图，以 css 200x200 设置。这就相当于前端工程师熟知的高分辨率下 2 倍图优化问题。
解决方式也就类似解决 2 倍图问题，将 canvas 的宽高放大 n 倍（n 取决于 window.devicePixelRatio），css 设置成原宽高。
function initCanvasContext(width: number, height: number): [HTMLCanvasElement, CanvasRenderingContext2D] {
canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
return [canvas, ctx];
};
如何用 canvas 绘制文字段落
使用 ctx.fillText(content, x, y); 绘制段落时，y 的定位并不在文字的下方。
比如我们绘制两条 y 分别为 10 24 的直线，再绘制 y 为 24 的文字：
原因是 canvas 绘制文字有自己的基准规则
默认文字的基准线就是偏下，这里做过实验，在不同系统设备上各个基准都不太一样，包括 bottom ideographic，唯独 middel 的样式在各个平台上表现是一致的。
所以这里有个取巧的方法，可以使文字是上下居中的。
ctx.textBaseline = 'middle'; // 适配安卓 ios 下的文字居中问题
ctx.save();
ctx.translate(0, -(fontSize / 2)); // 适配安卓 ios 下的文字居中问题
ctx.fillText(content, x, y);
ctx.restore();
先将文字基准线居中，再在绘制文字的时刻改变坐标系，画完后改变成原来的坐标系。
Further
这套画图库的效果其实很类似 html2canvas 这个类库了，但是 json2canvas 的形式其实还有其他可以想象的空间。
比如
- 可以直接通过 sketch 根据图层直接生成匹配的 json 数据，而 json 数据是适配不同前端框架的。
- 这个类库的大部分实现是如何计算各个节点的盒模型尺寸位置，而这也是跟平台无关的，可以很快速的迁移至小程序中。小程序中仅仅兼容下画图 api 就可以了。
- 如果在各个前端框架层觉得配置 json 不太直观，可以在组件层创建几个关键组件
<Div style={}> <Text style={}> <Image style={}>，然后就可以像写 html 一样去写 canvas。这也类似 html2canvas 的写法。
