canvas长微博生成功能实践

0x00 概述

近日开发移动端H5遇到文字转图片的需求，类似长微博生成工具。由于需求简单，并未采用rasterizeHTML.js或html2canvas这类略显庞大的html转图片工具，而是采用canvas原生API直接在画布上生成图片。

理一下思路。

1. 需求：前端实现文字转图片。超宽度文字换行显示，并可设置行高。

2. 问题点：文字换行，文字行高实现，canvas导出图片。

0x01 文字换行与行高的原理与实现

CanvasRenderingContext2D对象唯一的打印文字方法 fillText(text, x, y [, maxWidth]) 不支持文字超宽自动换行，即超宽文字被写出画布从而不可见。方法的第三个可选参数指定打印文本行的最大宽度，必要时会缩小整个文本行的字体尺寸（真是对文字换行功能毫无贡献啊）。

所以，必须手动实现文字换行功能。基本思路是迭代文本行的每一个字符，然后用measureText(text)方法测量并累加字符宽度。当字符累计宽度即将超宽时，插入换行标志。当所有文字迭代完成后，就得到了一个已在所有换行位置插入换行标志的字符串。

遍历已插入换行标志的字符串时，每遇一个换行标志，Y轴坐标累加行高值一次。

参考：

1. fillText(): https://developer.mozilla.org...

2. measureText(): https://developer.mozilla.org...

0x02 canvas导出图片

HTMLCanvasElement.toDataURL()方法可导出画布图像为base64编码格式的图片。api见 https://developer.mozilla.org...