不用懂canvas就可以快速完成小程序海报开发

前言

之前在开发项目时需要实现微信小程序生成海报功能，刚开始打算用canvas进行实现，发现需要单独实现很多功能，比较麻烦，后来预研发现有个painter图片库，可以通过传入模板快速生成海报，使用起来简单高效。

接入准备

代码下载

首先我们需要去将核心实现代码拷贝到本地，打开代码我们会发现是小程序原生语言：

<view style='position: relative;{{customStyle}};{{painterStyle}}'>
  <block wx:if="{{!use2D}}">
    <canvas canvas-id="photo" style="{{photoStyle}};position: absolute; left: -9999px; top: -9999rpx;" />
    <block wx:if="{{dancePalette}}">
      <canvas canvas-id="bottom" style="{{painterStyle}};position: absolute;" />
      <canvas canvas-id="k-canvas" style="{{painterStyle}};position: absolute;" />
      <canvas canvas-id="top" style="{{painterStyle}};position: absolute;" />
      <canvas 
        canvas-id="front" 
        style="{{painterStyle}};position: absolute;"
        bindtouchstart="onTouchStart"
        bindtouchmove="onTouchMove"
        bindtouchend="onTouchEnd"
        bindtouchcancel="onTouchCancel"
        disable-scroll="{{true}}" />
      </block>
  </block>
  <block wx:if="{{use2D}}">
    <canvas type="2d" id="photo" style="{{photoStyle}};" />
  </block>
</view>

虽然也能在uniapp使用，但看着不是很顺眼，还是想统一vue实现方式。

代码转换

社区已经有大佬提供了相关插件转换小程序代码：

npm install miniprogram-to-uniapp -g

接着执行代码转换命令:

wtu -i ./painter -m

等待一会儿，代码便转换成功。

项目接入

组件引入

完成相关准备工作后，我们可以采用vue组件的方式引入到项目当中。前面转换成功以后会生成一个文件夹，包含多个文件，我们将vue文件和lib文件夹单独拷贝出来，并在项目中新建一个uniPainter组件文件夹，拷贝进去。

由于vue文件里还调用了setData方法，这个方法没有自动转换，我们需要将polyfill文件夹下mixins文件里的setData方法引入进来，可以采用mixins方式引入：

import setData from '/mixins/setData'
export default {
 mixins: [setData],
 ....
}

然后以组件方式在项目中引入：

<tempalte>
  <Painter :palette="canvasData" :LRU="true" @imgOK="onImgOK" @imgErr="onImgErr" widthPixels="800"></Painter>
</template>
<script>
import Painter from '@/components/uniPainter'

export default {
  components: {
    Painter
  },
  ...
  methods:
    onImgOK(e) {
     // 其中 e.detail.path 为生成的图片路径
    },
    // 海报生成失败
    onImgErr(e) {
      //
    }
  }
}
</script>

其中canvasData是模板文件，具体可参考painter图片库要求，采用如下格式：

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ...
  ]
}

图片清晰度可以设置widthPixels，但设置的越大，手机性能要求越高，否则会生成失败，开启LRU功能可以缓存网络下载的资源，避免重复下载，提高性能。

报错处理

完成前面工作以后，就可以在项目中运行啦，但是你会发现微信调试控制台有一大堆的vue warning:

其实从报错不难发现某些变量和方法出现问题，直接打开painter组件vue代码，通过搜索发现工具转换后的代码有一点问题，一些变量没有放到data下：

根据报错信息进行搜索修改以后，就可以完美解决warning报错问题，这下舒服了。

总结

以上就是uniapp小程序使用painter库的相关方案，我们只需要定义海报模板文件，就可以快速生成海报，提高开发效率。