在小程序中生成海報是一種非常有效的推廣方式

用戶可以使用小程序的過程中生成小程序海報并分享給他人

通過海報的形式，用戶可以直觀地了解產品或服務的特點和優(yōu)勢

常見繪制海報方式

目前，小程序海報有兩種常見的實現(xiàn)方式：

· canvas 繪制海報

· 服務端繪制海報

這兩種方式各有千秋

canvas 繪制海報
使用 canvas 繪制海報主要有以下幾個步驟

1、創(chuàng)建 canvasContext

2、獲取網絡圖片的本地路徑

3、繪制圖片、文字等到 canvas

4、調用 wx.canvasToTempFilePath 導出圖片

盡管 canvas 繪制功能強大，但實際使用中，這些操作看似簡單，但調試起來卻比較麻煩

而且面對一些復雜的排版時，使用 canvas 繪制相較于使用 CSS 繪制來說困難許多,如圓角、百分比、自定義字體等等。

除此之外，canvas 的寬高有最大限制，超出限制則會繪制空白

服務端繪制

小程序也可以通過調用服務端接口，將需要生成海報的數(shù)據(jù)傳遞給服務端，

由服務端使用 Canvas API 等第三方庫來生成圖片。

然而，這種繪制方式需要走網絡請求，如果量大會給服務器帶來一定的成本壓力。

此外，對于復雜排版的實現(xiàn)，使用 Canvas 繪制也有一定的難度。

盡管小程序海報雖然好用，但是當遇到要求比較高的設計稿需要還原海報時，對小程序開發(fā)者來說是一個十分讓人頭疼的問題

考慮到海報在小程序中使用的廣泛性，我們把canvas繪制海報封裝成組件使用，通過對象配置的方式生成海報圖，更加簡潔易用~

引入組件

"usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }

wxml

<image src="{{shareImage}}" class="share-image"></image>
<canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>

js

Page({
  data: {
    shareImage:'',
    paintingIndex:0,
    painting:{
      width: 375,
      height: 500,
      clear: true,
      views: [
        {
          type: 'image',
          url: 'https://defaultbg.png',
          top: 0,
          left: 0,
          width: 381,
          height: 500
        }
      ]
    },
    show:false,
    pop:false,
    share:"",
    pay:false,
    from:''
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad() {
    this.getShare();
  },
  async getShare(){
    let _this = this;
    await get_share().then(res=>{
      const painting =  {
        width: 375,
        height: 500,
        clear: true,
        views: [
          {
            type: 'image',
            url: 'https://defaultbg.png',
            top: 0,
            left: 0,
            width: 381,
            height: 500
          },
          {
            type: 'image',
            url: res.data.personnel_share_img || 'https://default.png',
            top: 190,
            left: 48,
            textAlign: "center",
            borderRadius:8,
            width: 290,
            height: 130
          },
          {
            type: "text",
            content: res.data.activity_name || '',
            fontSize: 18,
            width: 280,
            color: "#000000",
            textAlign: "left",
            top: 336,
            left: 46,
            zIndex:200
          },
          {
            type: 'image',
            url: res.data.avatar_url || 'https://default.png',
            top: 405,
            left: 42,
            borderRadius:7,
            width: 70,
            height: 60,
            zIndex:200
          },
          {
            type: "text",
            content: res.data.guardian_name || '默認名稱',
            fontSize: 16,
            color: "#000000",
            textAlign: "left",
            top: 415,
            left: 120,
            zIndex:200
          },
          {
            type: "text",
            content: "分享給你",
            width: 96,
            fontSize: 14,
            color: "#555555",
            textAlign: "left",
            top: 440,
            left: 120,
            zIndex:200
          },
          {
            type: 'image',
            url: res.data.qr_img_url || 'https://default.png',
            top: 390,
            left: 240,
            width: 100,
            height: 90,
            zIndex:200
          },
        ]
      };
      _this.setData({
        share:res.data,
        painting
      })
    })
     await _this.setData({
          mode: 'normal',
          painting:this.data.painting,
          paintingIndex: 1,
          show:true
        })
  },
  eventGetImage(event){
    let _this = this;
    const { tempFilePath } = event.detail
    this.setData({
      shareImage: tempFilePath
    })
  }
})

獲取組件

文章來源地址http://www.zghlxwxcb.cn/news/detail-812693.html

到了這里，關于canvasdrawer 微信原生小程序生成海報圖片的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！