大家好，我是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

git clone https://github.com/Kujiale-Mobile/Painter.git

将Painter的目录 /components/painter下的文件painter直接复制到自己的项目中。

作为自定义组件引入，注意目录为引入的代码所在目录

"usingComponents":{
  "painter":"/components/painter/painter"
}

创建生成图片的页面，在页面中开始画图片

index.wxml

<!-- show-menu-by-longpress 可以使图片长按保存并分享 -->
 <image wx:if="{{sharePath}}" class="qrcode" src="{{sharePath}}" show-menu-by-longpress="{{true}}" />
  <!-- 将该组件定位在屏幕之外，用户查看不到。 -->
  <painter style="position: absolute; top: -9999rpx" scaleRatio="{{3}}" palette="{{imgDraw}}" bind:imgOK="onImgOK" />

index.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的配置参数

友情链接

Painter Github

END

至此，基本的绘制就完成了，这种以json的形式进行画图的方式极大地提高了我们的开发效率，具体内容的绘制根据自己公司的需求进行调整即可。

下次见~ 我的朋友，我是HoMeTown👨‍💻‍，➕我VX，💊你进群，这是一个大家共同成长、共同学习的社群！群内十分活跃，至于有多活跃，你来了就知道了！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。

👉 vx: hometown-468

👨‍👩‍👧 公众号：秃头开发头秃了 【关注回复“进群”】

🤖 Github：HoMeTownSoCool

高赞好文