小程序分享海報簡單實現

小程序分享海報簡單實現 最終實現效果 使用wxa-plugin-canvas

傳送:https://github.com/jasondu/wxa-plugin-canvas
wxa-plugin-canvas是一個生成二維碼海報的組件，通過非常簡單的配置就可以生成精美的海報
使用:
1 在根目錄新建文件夾components將wxa-plugin-canvas添加到該文件中
2 在單文件頁面使用
.json文件中使用組件(注意引入的路徑)
"usingComponents": { "poster": "../../components/wxa-plugin-canvas/poster" }
.js文件中引入

import Poster from "../../components/wxa-plugin-canvas/poster/poster.js"

.wxml中使用標簽

  <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>

wxml文件 小案例

<!--index.wxml-->
<view class="container">
    <button bindtap="drawPoster">獲取海報</button>
  </view>
  <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
  <view wx:if="{{showposterImg}}" class="popup-mask"></view>
  <view wx:if="{{showposterImg}}" class="posterImg-box">
    <image mode="widthFix" class="posterImg" src="{{posterImg}}"></image>
    <view class="btn-create" bindtap="savePosterPic">保存到相冊</view>
</view>

js文件

Page({
  data: {},
  // 開始繪制
  async drawPoster() {
    const _this = this
    const qrcodeRes = {
      scene: "poster",
      page: 'pages/index/index',
      is_hyaline: true,
      autoColor: true,
      expireHours: 1
    }
    const qrcode = "https://ftp.bmp.ovh/imgs/2020/09/186537cbbd51fa76.png"  // 二維碼路徑
    const pic = "https://ftp.bmp.ovh/imgs/2020/09/3e9fd2c39153fa95.png" // 圖片路徑
    wx.getImageInfo({
      src: pic,
      success(res) {
        const height = 490 * 667/375
        _this.drawSharePicDone(height, qrcode)
      },
      fail(e) {
        console.error(e)
      }
    })
  },
  // 繪制參數
  drawSharePicDone(picHeight, qrcode) {
    const _this = this
    const _baseHeight = picHeight
    this.setData({
      posterConfig: {
        width: 750,
        height: picHeight,
        backgroundColor: '#fff',
        debug: false,
        blocks: [
          {
            x: 76,
            y: 74,
            width: 604,
            height: picHeight + 120,
            borderWidth: 2,
            borderColor: '#c2aa85',
            borderRadius: 8
          }
        ],
        images: [
          {
            x: 133,
            y: 133,
            url: "https://ftp.bmp.ovh/imgs/2020/09/3e9fd2c39153fa95.png", // 商品圖片
            width: 490,
            height: picHeight
          },
          {
            x: 76,
            y: _baseHeight + 199,
            url: qrcode, // 二維碼
            width: 222,
            height: 222
          }
        ],
        texts: [
          {
            x: 352,
            y: _baseHeight + 260, //上邊距
            width: 650,
            lineNum: 2,
            text: "測試商品",
            // textAlign: 'center',
            fontSize: 40,
            color: '#333'
          },
          {
            x: 352,
            y: _baseHeight + 330,
            text: '￥' + "100",
            // textAlign: 'center',
            fontSize: 50,
            color: '#e64340'
          },
          {
            x: 352,
            y: _baseHeight + 390,
            text: '長按識別小程序碼',
            fontSize: 28,
            color: '#999'
          }
        ],
      }
    }, () => {
      Poster.create();
    });
  },
  // 繪制成功
  onPosterSuccess(e) {
    console.log('success:', e)
    this.setData({
      posterImg: e.detail, // 當前頁面圖片路徑
      showposterImg: true
    })
  },
  // 繪制失敗
  onPosterFail(e) {
    console.error('fail:', e)
  },
  // 保存圖片
  savePosterPic(){
    const _this = this
    // 調用小程序保存圖片api
    wx.saveImageToPhotosAlbum({
      filePath: "https://ftp.bmp.ovh/imgs/2020/09/d2dab2061d80ae3f.jpg",
      success: (res) => {
        wx.showModal({
          content: '已保存到手機相冊',
          showCancel: false,
          confirmText: '知道了',
          confirmColor: '#333'
        })
      },
      fail: (res) => {
        wx.showToast({
          title: "保存失敗",
          icon: 'none',
          duration: 2000
        })
      }
    })
  }
})

wxss文件

.posterImg-box{
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: 100;
  text-align: center;
}
.btn-create{
  width:100%;
  height:50px;
  background: #00B26A;
  color:#fff;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
}