微信小程序插件 painter 生成海报、二维码

GitHub 地址：https://github.com/Kujiale-Mobile/Painter

一、引入

将 components/painter 整个文件放到自己项目的 components 中；以组件的形式在页面的 json 文件中引入；

二、使用

<view class="container">
  <image style="width: 300px; height: 300px;" src="{{path}}"></image>
  <painter palette="{{detail}}" bind:imgOK="onImgOK" style="position:fixed; top:-999px;"></painter>
</view>

Page({
  data:{
    detail:null,
    path:null
  },
  onShow() {
    this.handleCode();
  },
  handleCode(){
    let detail = {
      width:"300px",
      height:"300px",
      background:"#f8f8f8",
      views:[
        {
          type:"qrcode",
          content:"xxs",
          css:{
            width:"80px",
            height:"80px",
            right:"10px",
            bottom:"10px",
            rotate:'0',
            borderRadius:"0px"
          }
        },{
          id:"img",
          type:"image",
          url:"../../assets/logo.png",
          css:{
            width:"40px",
            height:"40px",
            right:'30px',
            bottom:"30px",
            background:"#fff"
          }
        },{
        type:"text",
        text:"扫描二维码参加活动",
        css:{
          left:"10px",
          bottom:"10px",
          fontSize:"30rpx",
          color:"red"
        }
      }]
    }
    this.setData({detail})
  },
  onImgOK(e){
    this.setData({
      path:e.detail.path
    })
  }
})

3、注意

1、使用网络图片的时候需要在小程序后台配置 request、uploadFile、downloadFile 合法域名，否则线上版本不显示；
2、图片模糊：在 painter 标签上添加 widthPixels=“1000” 将值调整到满意为止 默认是375；
3、我将从接口获取的图片资源放在本地，然后根据弹窗显示的参数来触发绘制海报的方法，这样每次打开弹窗海报就会出现闪动；解决方法是将接口返回数据直接以参数形势传递给 painter ，然后用 observer 来监听变化触发绘制海报方法；

最后、这个插件使用起来还是比较简单的，直接根据 GitHub 里面的介绍使用就可以了

1、二维码中间无法添加 logo，想要生成能添加 logo 的二维码可以使用 weapp-qrcode；
2、如果觉得写配置太麻烦，可以借助可视化平台布局然后生成对应的 JSON：https://lingxiaoyi.github.io/painter-custom-poster/；