微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用

微信小程序-运用painter插件生成海报–比canvas好用

先放插件地址：https://github.com/Kujiale-Mobile/Painter
还有个可视化把海报生成代码的地址：https://lingxiaoyi.github.io/painter-custom-poster/

有这两个你的海报已经基本完成一大半了，比苦苦的用canvas硬画海报舒服太多了！！！

把这个插件放在你小程序项目component文件下，然后在你需要的地方json文件里引入一下

"usingComponents": {
    "painter": "/component/painter/painter"
  }

然后把你在可视化生成的海报代码复制一下，在需要用的那个文件目录生成一个canvas.js（当然你可以随意取名）

然后在对应page页面的js文件里引入这个canvas.js文件，在wxml文件里使用painter组件

<!-- 这个是生成的海报图片预览 -->
<image src="{{src}}" style="height:980rpx" mode="aspectFit" class="canvas-img"></image>
<!-- 这个是painter组件使用 -->
<painter palette="{{wxml}}" style="position: absolute; top: -9999rpx;"  bind:imgOK="onImgOK" />
<!-- 生成海报按钮 -->
<button bindtap="painterBtn">生成海报</button>

然后paintertest.js文件里

import canvas from './canvas'
// 生成海报点击事件
 painterBtn() {
    this.setData({
      wxml: canvas()
    })
    wx.showLoading({
      title: '正在生成中...',
    })
  },
  // panter 
  onImgOK(e) {
    console.log(e);
    this.setData({
      src: e.detail.path
    })
    wx.hideLoading()
  },

到此也就基本完成了

如果想动态给海报里传参

// paintertest.js
import canvas from './canvas'
// 生成海报点击事件
 painterBtn() {
 	let name="我是传递的参数";
    this.setData({
      wxml: canvas(name)  // 在此传递参数
    })
    wx.showLoading({
      title: '正在生成中...',
    })
  },

// canvas.js
module.exports = data => {
  return (
    {
      "width": "620px",
      "height": "980px",
      "background": "#ffffff",
      "views": [
        {
          "type": "text",
          "text": data.name,
          "css": {
            "color": "#191846",
            "background": "rgba(0,0,0,0)",
            "width": "536px",
            "top": "486px",
            "left": "41px",
            "rotate": "0",
            "borderRadius": "",
            "borderWidth": "",
            "borderColor": "#000000",
            "shadow": "",
            "fontSize": "30px",
            "lineHeight": "43px",
            "fontWeight": "normal",
            "textStyle": "fill",
            "textDecoration": "none",
            "fontFamily": "",
            "textAlign": "left"
          }
        },
      ]
     }
  );
}

以上基本可以解决你大部分的海报绘制需求