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

/**
 *  生成微信小程序码卡片
 */

import { Canvas } from "@tarojs/components";
import style from "./index.module.less";
import { getCanvasTempPath, savePicture } from "@/utils/index";
import { checkPermission, showAuthModal } from "@/utils/auth";
import { APP_NAME_TEXT, DEFAULT_AVATAR } from '@/config'

import {
  Application,
  ImgLoader,
  Container,
  Image as DuduImage,
  RichText,
  Text,
} from "@/libs/duducanvas/index";
import Stage from "@/libs/duducanvas/Stage";
import Taro from "@tarojs/taro";
import { genQrcode, getCanvasSize } from './shareCard'

import { forwardRef, useImperativeHandle } from "react";
import { TAgentDetail } from "@/types/agent";

export interface IShareCard {
  saveCardToAlbum: () => void;
}

interface Props {
  agent: TAgentDetail;
}


export default forwardRef(({ agent }: Props, ref) => {
  const { canvasWidth, canvasHeight, rValue } = getCanvasSize();
  let stage: Stage|null;

  // 保存至相册
  const saveCardToAlbum = async () => {
    
    Taro.showLoading();
    // 延迟获取 canvas
    await initCanvas();
    if(!stage){
      return
    }
    let tmpImage = await getCanvasTempPath(stage.canvas, "shareCard");
    const authed = await checkPermission("scope.writePhotosAlbum");
    if (!authed) {
      showAuthModal("需要您相册权限");
      return;
    }
    const res = await savePicture(tmpImage);
    if(res){
      Taro.showToast({
        title: '保存成功'
      })
      return 
    }
    Taro.showToast({
      title: '保存失败'
    })
  };

  const initCanvas = async () => {
    // console.log("share:", character);
    const app = new Application(
      "#shareCard",
      { width: canvasWidth, height: canvasHeight },
      null
    );
    
    stage = await app.init();
    if(!stage){
      return
    }
    const avatarImg = agent.avatarLogo ?? DEFAULT_AVATAR

    const loader = new ImgLoader(stage.canvas, [
      {
        id: "avatar",
        src: avatarImg,
      },
    ]);
    await loader.load();

    const card = new Container();

    card.direction = "column";
    card.x = 0;
    card.y = 0;
    card.gap = rValue(24);
    card.width = rValue(319);
    card.height = rValue(447);
    card.backgroundColor = "white";

    // 头像&名称框
    const view = new Container();
    view.justifyContent = "flex-start";
    view.gap = rValue(12);
    view.width = rValue(271);
    view.height = rValue(48);
    card.addChild(view);

    // 头像
    const avatarTexture = loader.get("avatar");
    if (avatarTexture) {
      const dWidth = 48;
      const avatar = new DuduImage({
        image: avatarTexture.image,
        dWidth: rValue(dWidth),
        dHeight: rValue((avatarTexture.height * dWidth/avatarTexture.width)),
      });
      const avatarWrapper = new Container()
      avatarWrapper.width = rValue(dWidth)
      avatarWrapper.height = rValue(dWidth)
      avatarWrapper.overflowHidden = true
      avatarWrapper.borderRadius = rValue(4);
      avatarWrapper.addChild(avatar)
      view.addChild(avatarWrapper);
    }

    // 用户名
    const name = new RichText({
      text: agent?.name ?? "",
      fontSize: rValue(18),
      color: "black",
      fontWeight: 600,
    });
    name.wrapWidth = rValue(184);
    name.lineClamp = 1;
    name.height = rValue(26);
    view.addChild(name);

    const qrcodeView = new Container();
    qrcodeView.width = rValue(271);
    qrcodeView.height = rValue(251);
    // qrcodeView.backgroundColor = "rgba(0,0,0, .2)";
    card.addChild(qrcodeView);

    const tips = new Text({
      text: `扫一扫上面的二维码图案，和我${APP_NAME_TEXT}聊聊吧`,
      fontSize: rValue(12),
      color: "rgba(0,0,0, .45)",
      fontWeight: 400,
    });
    card.addChild(tips);

    stage.addChild(card);
    if(agent.agentId){
      await genQrcode(agent.agentId, rValue(255), rValue(255), stage, qrcodeView);
    }
    stage.update();
    Taro.hideLoading();
    return stage;
  };

  

  useImperativeHandle(ref, () => {
    return {
      saveCardToAlbum,
    };
  });

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