poster-example.js 3.27 KB
import {
  getBindtapData
} from '../../utils/util';
// 二维码
import QR from '../../utils/qrcode'
// 海报
import Poster from '../../plugin/poster/poster/poster';

let app = getApp();
Page({
  data: {
    authorizeVisible: false,
  },
  onShareAppMessage() {},
  showAuth() {
    this.setData({
      authorizeVisible: true
    })
  },
  onLoad(options) {},
  initData() {
    this.initPoster();
    this.initQrcode();
  },

  // 创建海报
  initPoster() {
    // 获取海报数据
    let posterData = this.getPosterConfig();
    // 绘制设置海报
    this.onCreatePoster(posterData);
  },

  // 创建二维码
  initQrcode() {
    createQrCode('wxapp-qrcode', 'qrcode', 300, 300)
  },

  // ----  START 海报合成  ----
  // 详情见: https://github.com/jasondu/wxa-plugin-canvas

  // 海报合成成功
  onPosterSuccess(e) {
    wx.hideLoading();
    const {
      detail
    } = e;
    this.setData({
      imageUrl: detail
    })
  },

  // 合成失败
  onPosterFail(err) {
    wx.hideLoading();
    console.error(err);
  },

  // 异步生成海报
  onCreatePoster(posterConfig) {
    this.setData({
      posterConfig: posterConfig
    }, () => {
      Poster.create(true); // 入参:true为抹掉重新生成
    });
  },

  // 获取海报数据
  getPosterConfig() {
    let blocks = [{
      x: 0,
      y: 0,
      width: 690,
      height: 900,
      backgroundColor: "#ffffff",
      borderRadius: 10,
    }];
    let images = [];
    let lines = [];
    let texts = [{
      x: 690 / 2,
      y: 192,
      width: 690,
      fontSize: 36,
      color: "#3680EB",
      textAlign: "center",
      zIndex: 11,
      text: "nickname",
    }];

    let posterData = {
      width: 690,
      height: 900,
      debug: false,
      blocks: blocks,
      images: images,
      lines: lines,
      texts: texts,
    }
    return posterData;
  },

  // ----  END 海报合成  ----



  /**
   ---------------- 分界线 ----------------
   */



  // ----  START 二维码生成  ----
  // 详情见: https://github.com/demi520/wxapp-qrcode

  // 创建二维码
  createQrCode(content, canvasId, cavW, cavH) {
    //调用插件中的draw方法,绘制二维码图片
    QR.api.draw(content, canvasId, cavW, cavH);
    this.canvasToTempImage(canvasId);
  },
  //获取临时缓存图片路径,存入data中
  canvasToTempImage(canvasId) {
    let that = this;
    wx.canvasToTempFilePath({
      canvasId, // 这里canvasId即之前创建的canvas-id
      success: function (res) {
        let tempFilePath = res.tempFilePath;
        console.log(tempFilePath);
        that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
          qrImagePath: tempFilePath,
        });
      },
      fail: function (res) {
        console.log(res);
      }
    });
  },
  //适配不同屏幕大小的canvas
  setCanvasSize(sz) {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / sz; //不同屏幕下canvas的适配比例;设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width; //canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },
  // ----  END 二维码生成  ----


})