前言

前一段时间，对之前的小程序『星邀请』改用mpvue重写，其中功能上有一个海报分享朋友圈的功能，之前1.0版本，只是后端生成小程序码然后前端将小程序码保存，嗯嗯，这样确实达到功能上的需求，但是海报过于简单，所以在这一次2.0版本上重新添加上背景海报。

实现方法

采用小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片一个库，用起来方便，功能强大(支持文本、图片、矩形、qrcode 类型的 view 绘制、圆角、布局方式等等)，墙裂推荐。很大一个亮点是支持本地的图片无需要网络图片。
官方mpvue接入方法
官方使用教程

简单的示例代码：

<template>
    <div>
      <painter @imgOK="onImgOk" :palette="template" />
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        shareImg: '',
        template: {}
      }
    },
    methods: {
      onImgOk (e) {
        this.shareImg = e.mp.detail.path  // 生成的图片路径
        wx.saveImageToPhotosAlbum({
          filePath: this.shareImg,
          success: res => {
            wx.showModal({
                title: '分享二维码已保存到系统相册', 
                content: '快去分享给朋友，让更多的朋友发现这里的美好',
                success: res => console.log(res),
                error: err=> console.log(err)
            })
          },
          fail: err => { console.log(err) }
        })
        this.template = {} // 重置,下次点击生成时重新生成
      },
      save () {
        // 绘制样式
        this.template = {
          background: 'https://icharle-1251944239.cosgz.myqcloud.com/%E5%8D%9A%E5%AE%A2/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%9C%8B%E5%8F%8B%E5%9C%88%E5%88%86%E4%BA%AB%E6%B5%B7%E6%8A%A5/60-2.png',
          width: '875px',
          height: '1301px',
          borderRadius: '10px',
          views: [
            {
              type: 'image',
              url: 'https://icharle-1251944239.cosgz.myqcloud.com/%E5%8D%9A%E5%AE%A2/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%9C%8B%E5%8F%8B%E5%9C%88%E5%88%86%E4%BA%AB%E6%B5%B7%E6%8A%A5/60-3.png',
              css: {
                bottom: '70px',
                left: '310px',
                width: '250px',
                height: '250px'
              }
            }
          ]
        }
      }
    }
  }
</script>

按照上面的效果生成海报图