如何利用小程序生成海報(bào)

今天就跟大家聊聊有關(guān)如何利用小程序生成海報(bào)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

小程序原生代碼生成海報(bào)

第一步：

下載包，并將painter包放在components目錄下

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

【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

第二步：

使用頁(yè)面的json文件中引入

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

第三步：

使用頁(yè)面的wxml

接收海報(bào)的圖片容器
<image mode="widthFix" src="{{ posterImg }}" id="goods_qr-code" alt />

<painter wx-if="{{showPainter}}" palette="{{data}}" bind:imgOK="firstImg" />
  
palette        字段作為畫(huà)圖數(shù)據(jù)的數(shù)據(jù)源, 圖案數(shù)據(jù)以 json 形式存在
widthPixels    強(qiáng)制指定生成的圖片的像素寬度

繪圖完成后，可以通過(guò)綁定 imgOK 或 imgErr 事件來(lái)獲得成功后的圖片或失敗的原因

第四步：

使用頁(yè)面的js

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

  海報(bào)生成完畢自動(dòng)調(diào)用
  
  firstImg(e) {
    console.log(e.detail.path);
    this.setData({
      posterImg: e.detail.path
    })
  },

插件介紹及官網(wǎng)：Painter生成海報(bào)

https://codechina.csdn.net/mirrors/Kujiale-Mobile/Painter?utm_source=csdn_github_accelerator

看完上述內(nèi)容，你們對(duì)如何利用小程序生成海報(bào)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。