前言

大家都知道小程序分享海报图的好处，不然也不会找到这篇文章，但是都苦于没有一套完善、通用、易用的方案，你能搜到的文章也都是一知半解，零零碎碎，我这人最受不了的就是没有章法，今天这篇文章将会彻底解决这个问题。

工欲善其事必先利其器，我要自己撸一个工具，这次不仅要解决，还要完美地解决，用了它，产品上午提出需求要做个分享海报，我们下午吃个饭的功夫就能搞出来，别不信，我来告诉你怎么做到。

CanvasDrawer

没错，这就是这个工具的名字，翻译过来就是Canvas抽屉，为什么不叫CanvasPoster？ 因为它的功能不止可以绘制海报，这个我们后面再说。

我们先看一下该工具可以实现的效果：

引入工具后，实现这个海报的代码没有超过100行，因为你只需要告诉工具你要绘制的图片或文字的位置，大小，颜色，其他都不用操心，怎么样，有没有引起你的兴趣？

接下来，我带你一步一步了解它，了解之后应用自然也不在话下了。

功能特点

1. 支持绘制图片

   • 支持可选是否自动切成圆角图片
   • 支持圆角模式下设置边框宽度，以及边框颜色

     该选项针对你要生成二维码的场景极其有用

2. 支持绘制文本

   • 支持批量绘制文本
   • 支持绘制单行动态文本，并可以自定义文本左右间距

     暂不支持动态文本换行，后续会考虑加入此功能

   • 支持自定义文本颜色、字号、字重、对齐方式

     例如上图中的“共省下69.86元”文案，69.86是动态获取的数据，可能存在6.6的情况，也可能存在6666.66的情况，文本的长度是不确定的，但是不用担心，工具内会自动计算好文本的长度，按你提供的间距自动渲染好位置。

3. 支持绘制图形

   • 可以绘制简单的圆和矩形，复杂的图形使用图片更好，没必要花费额外的性能去自己绘制

4. 使用canvas2d实现，支持同层渲染且性能更佳。

那么我们如何使用？

使用方法

安装

npm install mp-canvas-drawer --save 复制代码

先在页面或组件的wxml中添加canvas组件，宽高照你的实际设计稿宽高定义就行，px的话一般就是375的稿，rpx就是750的稿。

<canvas type="2d" id="myCanvas" class="canvas" style="width: {{width}}rpx; height: {{height}}rpx" ></canvas> 复制代码

在页面或组件中导入，并且初始化

import W2P from './canvasDrawer'; onLoad(){ this.w2p = new W2P('#myCanvas', this, { bgColor: '#ffffff', radius: 32 }); this.w2p.init().then(() => { this.drawSharePoster(); // 初始化完成后就可以开始画了 });
} 复制代码

工具类接受以下参数：

new W2P(canvasId, instance, container, designWindowWidth) 复制代码

开始绘制海报

// 绘制分享海报 async drawSharePoster(){ // 绘制背景图，填写图片资源，起始点坐标（x, y），宽高 await this.w2p.drawImage('https://.../a.png', 0, 0, 618, 868); const adjustTimes = await geAdjustTimes(); // 这里只是举例，使用时动态数据建议提前获取 /* 绘制具有动态文本的行 */ this.w2p.drawDynamicTextsRow({ texts: ['2022年，油价经历', adjustTimes, '次调整'], // 该行要绘制的文本 originX: 48, // 该行起始x坐标，即文本距离海报容器左边框的距离 // 以下参数既可作为通用参数，也可作为个性化参数，填写个性化参数后会覆盖通用参数值 originY: 239, // 该行起始y坐标，即文本距离海报容器上边框的距离 textMargin: 10, // 文本左间距（从第二个文本开始生效） size: 28, // 该行字体大小 bold: 600, // 文字字重 color: '#470D00', // 该行文字颜色 }); /* 绘制动态文本行，并且个性化插入文本 */ this.w2p.drawDynamicTextsRow({ texts: [
          { text: '我在XXXX共加油' }, // 数字样式个性化突出 { text: useTimes, color: '#F44505', size: 44, originY: 369 },
          { text: '次' },
        ], originX: 48, originY: 380, textMargin: 10, size: 28, color: '#470D00' }); // 绘制静态文本 // 参数依次为：文本 | x | y | 字号 | 颜色 | 字重 | 水平对齐方式可选left（不传默认）、center、right| 垂直对齐方式可选top（默认）、middle、bottom this.w2p.drawText('长按扫码', 172, 552, 28, '#000000', 600, 'left', 'top' ); // 批量绘制文本 const texts = [
      { text: '长按扫码', x: 172, y: 552, size: 28, bold: 500, color: '#000000' },
      { text: '查看你的城市油价排名', x: 172, y: 592, size: 28, bold: 600, color: '#eeeeee' },
    ]; this.w2p.drawTexts(texts); // 给图片绘制边框（二维码场景常用） // 参数依次为：图片链接 | x | y | 宽 | 高 | 是否切成圆形 | 圆形模式下边框宽度| 圆形模式下边框颜色 await this.w2p.drawImage('https://.../qrcode.png', 48, 516, 104, 104, true, 20, '#ffffff'); // 绘制简单的圆形 // 参数依次为：x | y | 半径 | 颜色 | 样式可选填充fill（默认）、线stroke this.w2p.drawCircular(123, 456, 20, color = '#ffffff', 'fill') // 绘制简单的矩形 // 参数依次为：x | y | 宽 | 高 | 圆角默认0 | 颜色 | 样式可选填充fill（默认）、线stroke this.w2p.drawRect(123, 456, 40, 40, 6, color = '#666666', 'stroke')

} 复制代码

添加二维码边框后效果如图：

注意： 如果你使用750的设计稿，那你传给工具的所有参数都要是以750位基准的rpx值

到这里，这个工具的绘制功能就讲完了，是不是迫不及待想去试一试了，别急，前面只是说了它的canvas绘制能力，还有一部分配套功能可以让你再少写些代码。

如果仅绘制不需要分享场景的话，那你掌握上面那些就足够用了。

绘制海报的目的就是要让用户分享出去，所以必然少不了把图片保存到相册的流程。

import W2P from './canvasDrawer'; onLoad(){
  wx.showLoading({ title: '请稍等...', mask: true }); this.w2p = new W2P('#myCanvas', { bgColor: '#ffffff', radius: 32 }, this); this.w2p.init().then(() => { this.drawSharePoster(); // 初始化完成后就可以开始画了 // 元素画完后，调用canvasExport方法把画布导出，之后就可以调用saveImage让用户把图片保存到相册了。 // 注意导出完成之后再允许用户操作保存 this.w2p.canvasExport().then(() => wx.hideLoading());
  });
} 复制代码

然后给你的按钮添加事件，用户点击时调用this.w2p.saveImage()，该方法也会返回Promise，你可以在保存成功或失败后做些什么。

this.w2p.saveImage()
   .catch(() => {...})
   .then(() => {...}); 复制代码

例如toast告知用户结果？这个不需要你来做，工具内已经做好了相应提示，成功时会提示 “保存成功”，失败时会提示“保存失败，请重试”，当然如果你不想要这个提示，可以这样写

this.w2p.saveImage({customSuccToast: true, customFailToast: true})
   .catch(() => {...}) // 然后你就可以自己写失败时或成功时的toast了 .then(() => {...}); 复制代码

还没完，保存图片到相册需要用户进行授权，这个工具也帮你做了：

在保存时它会先查询有没有授权，授权过则保存图片，如果没有授权会拉起授权弹窗，如果用户同意则保存图片。

如果用户拒绝则展示弹窗再提示一下“监测到您没有授权保存到相册权限，无法使用该功能，是否去授权？”，如果用户点击确定会跳转到授权页授权，用户再次点击保存按钮时就会获取到新的权限状态了。

以后再遇到分享海报需求再也不用愁了，半小时搞定它！感兴趣的同学可自行查看js版本源码