miniapp/src/components/Poster/config.js

import Taro, { preloadData } from '@tarojs/taro'

/**
 * 获取配置
 * @returns 
 */
export function getConfig() {
  // https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html
  const systemInfo = Taro.getStorageSync('systemInfo')
  const { windowWidth, pixelRatio: dpr } = systemInfo

  // canvas
  const canvas = {
    width: windowWidth * dpr,
    // 设计稿宽高比 2.16  = height / width
    height: windowWidth * dpr * 2.16,
  }

  // 图片
  const poster = {
    width: canvas.width,
    height: canvas.width * 16 / 9, // 图片宽高 9 : 16 占用 canvas 80%
    x: 0,
    y: 0,
  }

  const marign = 22.5 * dpr;
  const innerMargin = 15 * dpr

  // 头像
  const avatar = {
    arc: true,  // arc 代表裁剪为圆形
    width: 66 * dpr,
    height: 66 * dpr,
    x: marign,
    y: poster.height + (39 * dpr),
  }

  // 小程序码
  const miniCode = {
    arc: true,
    width: 99 * dpr,
    height: 99 * dpr,
    x: canvas.width - (99 * dpr) - marign,  // 99 是宽度
    y: poster.height + (20 * dpr),
  }

  // 姓名
  const name = {
    // https://developer.mozilla.org/zh-CN/docs/Web/CSS/font
    font: `${15 * dpr}px serif`,
    // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillStyle
    fillStyle: '#333333',

    // 左右两边边距
    // 左右两边文字边距
    maxWidth: canvas.width - (marign * 2) - avatar.width - miniCode.width - (innerMargin * 2),

    x: marign + avatar.width + innerMargin,
    y: poster.height + (65 * dpr),
  }

  // 说明
  const desc = {
    font: `${10 * dpr}px serif`,
    fillStyle: '#666666',
    maxWidth: name.maxWidth,
    x: name.x,
    y: poster.height + (89.5 * dpr),
  }

  return {
    systemInfo,
    canvas,
    poster,
    miniCode,
    avatar,
    name,
    desc,
  }
}