bluenote/src/components/custom-share/index.tsx

/**
 * 生成微信分享给聊天框内的图片卡片
 */
import { Canvas } from "@tarojs/components";
import style from './index.module.less'
import { getCanvasTempPath } from "@/utils/index";
import {
  Application,
  ImgLoader,
  Container,
  Image as DuduImage,
  RichText,
} from "../../libs/duducanvas/index";
import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";
import { getSharePromise } from "./shareUtils";
import Stage from "@/libs/duducanvas/Stage";
import { TAgentDetail } from "@/types/agent";
import { DEFAULT_AVATAR_SHARE_BG } from "@/config";
import { useIsLogin } from "@/xiaolanbenlib/hooks/data/useAuth";

const getCanvasSize = () => {
  // 根据屏幕宽度计算 canvas 宽度
  const windowInfo = Taro.getWindowInfo();
  const screenWidth = windowInfo.windowWidth;
  // console.log(windowInfo, 'WindowInfo');

  // 设计宽度是 210*170 ，实际需要放大到 占满屏宽 375 * 300
  const designWidth = 375;
  const designHeight = 300;

  // 为了清晰度，宽高放大一倍
  const canvasWidth = screenWidth * 2;
  const canvasHeight = (screenWidth / designWidth) * designHeight * 2;
  // 放大系数
  const ratio = canvasWidth / 210;

  return {
    canvasWidth,
    canvasHeight,
    ratio,
  };
};


interface Props {
  agent: TAgentDetail;
}

export default (props: Props) => {
  const { canvasWidth, canvasHeight, ratio } = getCanvasSize();
  const isLogin = useIsLogin()
  let stage: Stage|null;

  // character = useCurrentCharacter
  const agent = props.agent
  const initCanvas = async () => {
    // console.log('share:', character)
    if(!agent){
      return
    }
    const app = new Application(
      "#myShareCanvas",
      { width: canvasWidth, height: canvasHeight },
      null
    );
    stage = await app.init();
    if(!stage){
      return;
    }

    let avatarImg = agent.avatarLogo ?? DEFAULT_AVATAR_SHARE_BG

    stage.backgroundColor = 'white'

    // 如果有头像，加载头像图片先
    const imgArr = [
      {
        id: "avatar",
        src: avatarImg,
      },
      {
        id: "blurBg",
        src: 'https://cdn.wehome.cn/cmn/png/221/META-H8UKXHWU-X0WXBKY1C0G0QA1DIH762-NSP5OMEM-IK.png',
      },
    ]

    const loader = new ImgLoader(stage.canvas, imgArr);
    await loader.load();


    // 头像
    const avatarTexture = loader.get("avatar");
    const avatar = new DuduImage({
      image: avatarTexture.image,
      dWidth: canvasWidth,
      dHeight: (canvasWidth / avatarTexture.width) * avatarTexture.height,
    });
    // 如果有头像，则需要上提，以显示出头像，如果是默认图则无需上提
    // if(agent.avatarLogo){
    //   avatar.y = ;
    // }
    const avatarWrapper = new Container()
    avatarWrapper.width = canvasWidth
    avatarWrapper.height = 100
    avatarWrapper.overflowHidden = true
    avatarWrapper.addChild(avatar)
    stage.addChild(avatar)


    const blurBgTexture = loader.get("blurBg");


    // 毛玻璃背景
    const dHeight = 56 * ratio
    const blurBg = new DuduImage({
      image: blurBgTexture.image,
      dWidth: canvasWidth + (4 * ratio),
      dHeight: dHeight,
    });
    blurBg.y = canvasHeight - dHeight
    // 延出来一点边，需要往两边延申遮一下
    blurBg.x = (-2 * ratio)
    stage.addChild(blurBg)


    // 名称与公司名容器
    const offsetPadding =  12 * ratio
    const infoList = new Container();
    infoList.y = blurBg.y + offsetPadding;
    infoList.x = offsetPadding;
    infoList.direction = "column";
    infoList.alignItems = 'flex-start'
    infoList.gap = 8 * ratio;
    infoList.width = canvasWidth - offsetPadding
    infoList.height = dHeight - offsetPadding;

    // 用户名
    const name = new RichText({
      text: agent.name ?? '',
      fontSize: 14 * ratio,
      color: "rgba(17,17,17, 1)",
      fontFamily: "PingFangSC-Medium",
      fontWeight: 500,
    });
    name.wrapWidth = 186 * ratio;
    name.lineClamp = 1;
    infoList.addChild(name);


    // 单位名
    if(agent.entName){
      const companyName = new RichText();
      companyName.lineClamp = 1;
      companyName.fontFamily = "PingFangSC-Regular";
      companyName.text = agent?.entName ?? '';
      companyName.wrapWidth = name.wrapWidth;
      companyName.fontSize = 12 * ratio;
      companyName.color = "rgba(17,17,17, .65)";
      infoList.addChild(companyName);
    }

    stage.addChild(infoList)


    stage.update();
  };


  // 您好，这是xxx的智能体主页！
  const shareTitle = '快和我的智能体聊聊吧' // '想了解我？快和我的AI聊聊吧',

  useShareAppMessage(async () => {
    const agentId = agent?.agentId;
    const path = `/pages/profile/index?agentId=${agentId}`
    console.log(agent)
    if(!agentId){
      return {
        title: shareTitle,
        path,
      }
    }
    Taro.showLoading()
    await initCanvas();
    Taro.hideLoading()
    let tmpImage = ''
    if(stage){
      tmpImage = await getCanvasTempPath(stage.canvas, "myShareCanvas");
    }
    if(!isLogin){
      return {
        title: shareTitle,
        imageUrl: tmpImage,
        path
      }
    }
    const reponse = await getSharePromise(agentId, shareTitle, tmpImage)

    return reponse;
  });

  useShareTimeline(() => {
    const agentId = agent?.agentId;
    const o = {
      title: shareTitle,
      query: `agentId=${agentId}`,
    };
    return o;
  });

  return (
    <Canvas
      type="2d"
      id="myShareCanvas"
      width={String(canvasWidth)}
      height={String(canvasHeight)}
      style={`width: ${canvasWidth / 2}px; height: ${canvasHeight / 2}px;`}
      className={style.canvas}
    />
  );
};