新手必看！小程序中用 JSON 绘制海报？真的太简单了!【建议收藏】

HoMeTown

发布于 2023-08-23 10:56:49

2050

发布于 2023-08-23 10:56:49

大家好，我是HoMeTown，生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件 painter。

painter

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片，然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的，往往为了绘制一张简单图片，就得写上一堆 boilerplate code ，而且一不小心还会踩到 Canvas 的各种彩蛋（坑）。我想此时你的心情肯定是这样的。

小程序Canvas的坑

Canvas 绘图是用的 px，而在小程序中我们一般使用 rpx 进行相对布局。
小程序 Canvas 中的 drawImage 方法，在 IDE 中可以直接设置网络图片进行绘制，但在真机上设置网络图片无用。
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
 <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


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)        })    }}...

效果如下：