mp-canvas-drawer
小程序海报绘制分享的完整解决方案，支持绘制，保存到相册，自动获取用户相册权限整套流程，开发者调用简单的方法即可完成复杂海报的绘制，彻底解决小程序海报绘制的难题。
安装
npm install mp-canvas-drawer --save在小程序中需要构建 npm 官方文档
功能
-
支持绘制图片
- 支持可选是否自动切成圆角图片
- 支持圆角模式下设置边框宽度，以及边框颜色
该选项针对你要生成二维码的场景极其有用
-
支持绘制文本
- 支持批量绘制文本
- 支持绘制动态文本，并可以自定义文本左右间距
- 支持自定义文本颜色、字号、字重、对齐方式
-
支持绘制图形
- 可以绘制简单的圆和矩形，复杂的图形推荐以图片的形式绘制。
-
使用canvas2d实现，支持同层渲染且性能更佳。
使用
先在页面或组件的wxml中添加canvas组件，宽高照你的实际设计稿宽高定义就可以，一般情况下是750。
<canvas type="2d" id="myCanvas" class="canvas" style="width: {{width}}rpx; height: {{height}}rpx" ></canvas>在页面或组件中导入，并且初始化
// W2P == wxml to post
import W2P from 'mp-canvas-drawer';
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());
});
}工具类接受以下参数：
new W2P(canvasId, instance, container, designWindowWidth)| 参数 | 说明 | 是否必填 |
|---|---|---|
| canvasId | 告知工具要绘制哪个canvas组件 | 是 |
| instance | 页面或组件的实例对象，即this，在页面中使用时可以不传，会默认取wx.createSelectorQuery参见，组件中使用时必传，因为要获取这个实例上的canvas组件 |
否 |
| container | 海报图容器参数，该参数是一个对象，可以设置背景颜色和圆角 {bgColor, radius} | 否 |
| container.bgColor | 背景颜色，默认'#ffffff' | 否 |
| container.radius | 添加圆角，默认0 | 否 |
| designWindowWidth | 设计稿尺寸, 默认750，即使用rpx为单位，推荐使用rpx，可以自动适配机型，如果你是375的稿子自己将值乘2就可以了。 | 否 |
绘制海报
// 绘制海报
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')工具内已经为你做好了保存到相册授权相关，其他更多细节，可参考博客