小程序生成海报、生成图片库-Painter

本文章单纯分享Painter库，为找不到小程序生成海报的前端开发者提供查询链接。

一、小程序生成图片库-Painter，轻松通过 json 方式绘制一张可以发到朋友圈的图片。

想到小程序中有如此大量的生成图片需求，而 Canvas 生成方法又是如此难用和坑爹（有关小程序的坑，可看 https://github.com/Kujiale-Mobile/MP-Keng ）。我们就想到可不可以做一款可以很方便生成图片，并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢？对此我们发起了 “画家计划— 通过 json 数据形式，来进行动态渲染并绘制出图片”。

二、git地址：https://github.com/Kujiale-Mobile/Painter.git

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

三、快速上手使用-Painter

1、拉取官方demo文件Painter

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

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

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

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

1）index.wxml

<view class="attainShare">
  <view class="canvasCss">
    <painter palette="{{paintPallette}}" bind:imgOK="onImgOK" widthPixels="375" use2D="{{true}}" />
  </view>
  <view class="canvasButton" catchtap="saveImage">
    保存图片
  </view>
</view>

2）index.js

import Text from './palette/text-example';

Page({
  imagePath: '',
  isSave: false,
  data: {
    template: {}
  },

  onImgOK(e) {
    console.log(e)
    this.imagePath = e.detail.path;
    this.setData({
      image: this.imagePath
    })
    if (this.isSave) {
      this.saveImage(this.imagePath);
    }
  },

  saveImage() {
    if (this.imagePath && typeof this.imagePath === 'string') {
      this.isSave = false;
      wx.saveImageToPhotosAlbum({
        filePath: this.imagePath,
      });
    }
  },

  onReady: function() {
    this.setData({
      paintPallette: new Text().palette(),
    });
  },
});

3）./palette/text-example中的text-example.js

const text = '锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦';
export default class ImageExample {
  palette() {
    const views = [];
    // 文字循环内容
    let tmpText = '';
    let index = 0;
    for (let i = 0; i < text.length; i++) {
      tmpText = `${tmpText}${text[i]}\n`;
      if (i % 5 === 4) {
        views.push({
          type: 'text',
          text: tmpText,
          css: {
            right: `${50 + index}rpx`,
            top: '60rpx',
            fontSize: '40rpx',
            lineHeight: '50rpx',
          },
        });
        index += 50;
        tmpText = '';
      }
    }
    // 添加二维码
    let qrcode = {
      type: 'qrcode',
      content: 'https://www.jianshu.com/p/67fd9dc6d445',
      css: {
        bottom: '40rpx',
        left: '180rpx',
        color: 'red',
        width: '120rpx',
        height: '120rpx',
      },
    };
    views.push(qrcode)
    return ({
      width: '654rpx',
      height: '500rpx',
      background: '#eee',
      views: views,
    });
  }
}

四、基本上小程序生成图片已经完成，具体公司项目生成图片业务参考Painter官方的README.md中的详细描述，进行图片制作，如果使用过程中遇到问题，可以私信，探讨一下！