【微信小程式】小程式原生代碼生成海報

第一步：

下載下傳包，并将painter包放在components目錄下

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

第二步：

使用頁面的json檔案中引入

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

第三步：

使用頁面的wxml

接收海報的圖檔容器
<image mode="widthFix" src="{{ posterImg }}" id="goods_qr-code" alt />

<painter wx-if="{{showPainter}}" palette="{{data}}" bind:imgOK="firstImg" />
  
palette        字段作為畫圖資料的資料源, 圖案資料以 json 形式存在
widthPixels    強制指定生成的圖檔的像素寬度

繪圖完成後，可以通過綁定 imgOK 或 imgErr 事件來獲得成功後的圖檔或失敗的原因
           

第四步：

使用頁面的js

生成海報的方法(){
this.setData({
        template: {
          width: "750rpx",
          height: "1500rpx",
          views: [
            {
              type: 'image',
              url: 圖檔路路徑,
              css: {
                top: '10rpx',
                left: '10rpx',
                right: '10rpx',
                width: '730rpx',
                height: '1500rpx'
              }
            }
          ]
        }
     })
}

  海報生成完畢自動調用
  
  firstImg(e) {
    console.log(e.detail.path);
    this.setData({
      posterImg: e.detail.path
    })
  },




           

插件介紹及官網：

Painter生成海報