前一段时间，小程序中需要动态生成图片，然后共享，这是一个非常常见的场景，所以我拿出了一个小工具canvasPainter.js，它包含了小程序中画布绘制的基本要求：

带配置的绘图(暂支持单行多行文字、矩形、圆形、图片、圆形图片类型)，支持后续预览和另存为图片，均为Promise格式。画布尺寸以总设计稿750px为准(可选)，在不同屏幕型号下可以等比例缩放。生成图片时，支持图片预下载，小程序周期缓存图片下载的tmp路径。演示地址

用法

使用起来也很简单~不需要介入wx。各种API，直接配置初始化相应的方法就可以了，一站式服务很精彩~

从“”导入CanvasPainter。/CanvasPainter '；Constconfig=[{type :' rect，width : 640，height : 560，x: 0，y: 0，color :' # fff'}，{type 3360' text '，text 3360' test text '，Color :' # 1499f8 '，size : 50，x3360 30，y : 100 }]//Initialize const painter=painterpainter . loadimginadvance()；//本地预下载图片；如果没有主动调用，在绘制时会再次下载。//更新绘图路径painter . resetconfig(new config)；//Draw painter.draw()。然后(()={console.log('绘图完成')；}).catch(e={console.log '(未能生成图片)，e)；});//Preview painter . Preview()；//保存画师.保存()。然后(()={console.log('保存完成')；}).catch(e={console.log '(保存失败，e)；});复制代码开发过程中遇到的要点记录如下：

如何按比例缩放？

因为画布绘制的长度单位是px，所以可以用小程序canvas.scale()求解。

const scale=wx . getsysteminfosync()。window width/750；this.ctx.scale(比例尺，比例尺)；//这样就可以预下载并缓存复制750px大小ui图等比例代码绘制的图片。

调用ctx.drawImage()时，需要先将图片下载到本地临时路径，耗时较长，建议提前做。临时路径对小程序周期有效，因此本地临时路径可以完全缓存。这样在重复生成canvas时，只会下载动态图片，固定图片路径会重复使用，避免重复下载~

另外图片域名需要在小程序后台配置。为了避免意外，在下载图片之前，应该检查一次图片网址。如果检查失败，跳过下载或直接切换到底部图片。

本地下载图片

保存图片前，需要调用wx.getSetting()了解用户是否允许将图片下载到本地权限，或者唤醒弹出窗口请求权限。如果权限被拒绝，最好给出toast提示，并将下载按钮重置为open-type='openSetting '。当用户再次点击时，用户将跳转到授权页面。

此外，使用时还有两个不愉快的提示：

画布组件显示-隐藏控件

不建议使用wx:if来控制画布组件的显示和隐藏，因为画布组件挂载到页面后，大约需要200ms才能成功绘制()。建议使用display:none/block直接控制，也方便实现图片预下载。

联合勤务分队

建议结合当前业务将生成共享图片的功能进一步拆分成组件，包括嵌入点击画布预览图片、将画布另存为图片按钮(兼容未授权下载图片跳转到授权页面)等。还可以自由控制绘图，更灵活地更新绘图时间。

关注这两点后，每分钟都可以创建一个动态生成的图~

附：完整API

初始化

新CanvasPainter(选项)options scanvsid : canvas-id .Context:画布使用上下文，当它在组件中使用时，只需传入它。配置：阵列[].绘图路径。支持的类型如下：矩形完整配置：{type :' rect '，width : 640，height 3360 560，x33600，Y :0，color :' # fff '，fill color在//fill下，stroke color在storke(可选)3333下。真，也就是假的状态。Round(可选): true，//表示是否为圆。默认情况下为False。}复制代码文本完整配置：{Type:' text '，X33600，Y336030，Color3360' # FFF '，//font color font: 'xx '，///font size 3360 20，//font size align: 'center '，//Left默认。(可选): '线通'，//暂时只有中下划线模式哈哈哈}复制代码multiline_text。多行文字的完整配置：{键入3360' multiline _ text '，line _ limit3360 30，//每行的字数是line _ height 3360 20，//行高.//其余与正文一致}复制代码图片图片完整配置：{Type :' image '，URL 3360 ' '，//图片路径X3360 ' '，Y3360 ' '，宽度3360 ' '默认为False。} Copy code saleBase(可选):根据设计稿的大小，默认为750。

预下载图片：

canvaspainter . loadimginadvance().可以在CanvasPainter实例化后立即调用。

绘图：

canvaspainter . draw()

预览大图：

canvaspainter . preview()

保存成图片：

canvaspainter . save()

更改config：

canvaspainter . resetconfig(new config)