如何利用小程序生成海報

今天就跟大家聊聊有關如何利用小程序生成海報，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

小程序原生代碼生成海報

第一步：

下載包，并將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生成海報

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

看完上述內容，你們對如何利用小程序生成海報有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。