--- theme: juejin --- 大家好，我是**HoMeTown**，生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件 painter。 # painter 由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片，然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的，往往为了绘制一张简单图片，就得写上一堆 boilerplate code ，而且一不小心还会踩到 Canvas 的各种彩蛋（坑）。我想此时你的心情肯定是这样的。

# 小程序Canvas的坑 1. Canvas 绘图是用的 px，而在小程序中我们一般使用 rpx 进行相对布局。 2. 小程序 Canvas 中的 drawImage 方法，在 IDE 中可以直接设置网络图片进行绘制，但在真机上设置网络图片无用。 3. canvasContext.clip 方法在 iOS 设备上的微信 6.6.6 版本及以下有 bug，会导致该 clip 下面使用的的 restore 方法失效。

# painter的使用 ## 拉取官方demo文件Painter ```bash git clone https://github.com/Kujiale-Mobile/Painter.git ``` ## 将Painter的目录 `/components/painter`下的文件painter直接复制到自己的项目中。 ## 作为自定义组件引入，注意目录为引入的代码所在目录 ```json "usingComponents":{ "painter":"/components/painter/painter" } ``` ## 创建生成图片的页面，在页面中开始画图片 **index.wxml** ```html

``` **index.js** ```js ... data: { imgDraw: {}, // 绘制图片的对象 } methods: { onImgOK(e) { void wx.hideLoading() this.setData({ sharePath: e.detail.path }) }, imgDrawCreator(qrcodePath) { return { width: '640rpx', height: '784rpx', background: 'linear-gradient(0deg, #FFE9DE 0%, #FFFFFF 18%, #FFFFFF 100%)', views: [ { type: 'text', text: '156 **** 6901', css: { top: '64rpx', fontSize: '36rpx', left: '50%', align: 'center', fontWeight: 'bold', color: '#B78142' } }, { type: 'text', text: '邀您及早规划尽享晚美人生', css: { align: 'center', top: '136rpx', fontSize: '28rpx', left: '50%', color: '#000' } }, { type: 'text', text: '长按识别二维码，开启养老规划', css: { bottom: '64rpx', fontSize: '26rpx', left: '50%', align: 'center', color: '#818899' } }, // 绘制图片 { type: 'image', url: qrcodePath, css: { top: '280rpx', left: '50%', align: 'center', width: '300rpx', height: '300rpx' } } ] } }, // 从服务端获取一些必要的配置 async fetchSomething() { const res = await fetchGetQrcodePath(); this.setData({ imgDraw: this.imgDrawCreator(res.data.data) }) } } ... ``` 效果如下：

# painter的配置参数 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/470f4e91f9544929bfc367a67fa2e5ba~tplv-k3u1fbpfcp-watermark.image?) # 友情链接 [Painter Github](https://github.com/Kujiale-Mobile/Painter) ## END 至此，基本的绘制就完成了，这种以json的形式进行画图的方式极大地提高了我们的开发效率，具体内容的绘制根据自己公司的需求进行调整即可。 > 下次见~ 我的朋友，我是`HoMeTown`👨‍💻‍，➕我VX，💊你进群，这是一个大家共同成长、共同学习的社群！群内十分活跃，至于有多活跃，你来了就知道了！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。 > > 👉 vx: `hometown-468` > > 👨‍👩‍👧 公众号：`秃头开发头秃了` 【关注回复“进群”】 > > 🤖 Github：[HoMeTownSoCool](https://github.com/HoMeTownSoCool) ## 高赞好文 - [CSS 实现奥特曼卡，你相信光吗？！](https://juejin.cn/post/7242596632368414779) - [涨工资、打游戏、谈对象、耍掘金！｜2022年终总结](https://juejin.cn/post/7179108624076111932) - [羊了个羊 🐑 一夜爆火，我却开始偷偷抹眼泪...](https://juejin.cn/post/7143439805559341086) - [分享 11 张巨好看的PC端界面！！!](https://juejin.cn/post/7140193310966022175) - [敢在我工位装摄像头？吃我一套JS ➕ CSS组合拳！！👊🏻](https://juejin.cn/post/7135994466006990856) - [前端老司机 70+ 实用工具网站分享（建议收藏！）🔥🔥](https://juejin.cn/post/7129412947931037732) - [【Git】什么！？都快2023年了还搞不清楚 git rebase 与 git merge！？😮](https://juejin.cn/post/7135261815935598600) - [ 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】](https://juejin.cn/post/7101943469085556766)