水一篇文章 😤
看到群友说分享图无法生成，闲来无事于是就自己动手敲了个前端实现

这里通过录屏可以看到，该图由服务端生成并回传了一段 base64 给前端

实际测试，该操作还是会占用一部分的 CPU 资源，假如修改成前端生成，那么依赖的则只是客户端机器

So，JS 源代码如下

(() => {
  const addScript = (url) => {
    const scriptDom = document.createElement("script");
    scriptDom.src = url;
    document.head.appendChild(scriptDom);
  };
  addScript("https://file.qwq.link/js/html2canvas.min.js");
  addScript("https://file.qwq.link/js/qrcode.min.js");

  let container,
    topDiv,
    topImgContainer,
    topImg,
    topImgFilter,
    dateContainer,
    date,
    yearMonth,
    title,
    description,
    bottomDiv,
    leftBotDiv,
    logo,
    logoDesc,
    qrCodeDiv;
  let siteLogo, siteTitle, siteDesc;
  const DEFAULT_COVER = "/wp-content/themes/pix/img/banner.jpg";
  let fontSize = {};

  const cardDomInit = () => {
    container = document.createElement("div");
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.backgroundColor = "white";
    container.style.height = "100vh";
    container.style.aspectRatio = "624/1035";
    container.style.boxSizing = "border-box";
    container.style.padding = "15px";

    topDiv = document.createElement("div");
    container.appendChild(topDiv);
    topDiv.style.height = "80%";
    topDiv.style.display = "flex";
    topDiv.style.flexDirection = "column";
    topDiv.style.justifyContent = "flex-end";
    topDiv.style.position = "relative";
    topDiv.style.padding = "30px";
    topDiv.style.gap = "50px";

    topImgContainer = document.createElement("div");
    topDiv.appendChild(topImgContainer);
    topImgContainer.style.position = "absolute";
    topImgContainer.style.inset = "0";
    topImgContainer.style.textAlign = "center";

    topImg = document.createElement("div");
    topImgContainer.appendChild(topImg);
    topImg.style.backgroundSize = "cover";
    topImg.style.backgroundPosition = "center";
    topImg.style.position = "absolute";
    topImg.style.inset = "0";

    topImgFilter = document.createElement("div");
    topImgContainer.appendChild(topImgFilter);
    topImgFilter.style.position = "absolute";
    topImgFilter.style.inset = "0";
    topImgFilter.style.backgroundColor = "#00000050";

    dateContainer = document.createElement("div");
    topDiv.appendChild(dateContainer);
    dateContainer.style.position = "absolute";
    dateContainer.style.right = "20px";
    dateContainer.style.top = "20px";
    dateContainer.style.display = "flex";
    dateContainer.style.flexDirection = "column";
    dateContainer.style.color = "white";

    date = document.createElement("span");
    dateContainer.appendChild(date);
    date.style.fontWeight = "800";
    date.style.color = "white";

    yearMonth = document.createElement("span");
    dateContainer.appendChild(yearMonth);
    yearMonth.style.color = "white";
    yearMonth.style.marginLeft = "auto";

    title = document.createElement("span");
    topDiv.appendChild(title);
    title.style.position = "relative";
    title.style.fontWeight = "600";
    title.style.color = "white";

    description = document.createElement("div");
    topDiv.appendChild(description);
    description.style.position = "relative";
    description.style.fontWeight = "400";
    description.style.color = "#EBEFFE";
    description.style.minHeight = "180px";

    bottomDiv = document.createElement("div");
    container.appendChild(bottomDiv);
    bottomDiv.style.display = "flex";
    bottomDiv.style.height = "0";
    bottomDiv.style.padding = "20px";
    bottomDiv.style.flexGrow = "1";

    leftBotDiv = document.createElement("div");
    bottomDiv.appendChild(leftBotDiv);
    leftBotDiv.style.display = "flex";
    leftBotDiv.style.flexDirection = "column";
    leftBotDiv.style.justifyContent = "center";
    leftBotDiv.style.gap = "10px";
    leftBotDiv.style.flexGrow = "1";

    logo = document.createElement("img");
    leftBotDiv.appendChild(logo);
    logo.style.maxHeight = "70px";
    logo.style.maxWidth = "200px";
    logo.style.objectFit = "cover";

    logoDesc = document.createElement("span");
    leftBotDiv.appendChild(logoDesc);
    logoDesc.style.color = "#B4B4B4";

    qrCodeDiv = document.createElement("div");
    bottomDiv.appendChild(qrCodeDiv);
    qrCodeDiv.style.height = "100%";
    qrCodeDiv.style.aspectRatio = "1/1";
  };

  const loadSiteInfo = () => {
    siteLogo = document.querySelector(".top_logo a img")?.src;
    siteTitle = document.querySelector("title").innerText.split("-")[0];
    siteDesc = document.querySelector(
      ".index_banner .user_info .des"
    )?.innerText;
  };

  const withContent = ({
    dateOfDay,
    dateOfYearAndMonth,
    cover,
    cardTitle,
    content,
    siteLogo,
    siteDesc,
  }) => {
    topImg.style.backgroundImage = `url(${cover})`;
    date.textContent = dateOfDay;
    yearMonth.textContent = dateOfYearAndMonth;
    title.textContent = cardTitle;
    description.textContent = content;
    logo.src = siteLogo;
    logoDesc.textContent = siteDesc;
  };

  const debounce = (fn, delay) => {
    let timer = null;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    };
  };

  const base64ForCard = (data) => {
    return new Promise((resolve) => {
      withContent(data);
      container.style.position = "absolute";
      container.style.left = "-9999px";
      document.body.appendChild(container);
      qrCodeDiv.innerHTML = "";
      new QRCode(qrCodeDiv, {
        text: data.link,
        height: qrCodeDiv.clientHeight,
        width: qrCodeDiv.clientWidth,
      });
      html2canvas(container, {
        logging: true,
        letterRendering: 1,
        allowTaint: true,
        useCORS: true,
      }).then((canvas) => {
        document.body.removeChild(container);
        resolve(canvas.toDataURL("image/png"));
      });
    });
  };

  const dataFromPost = (postId) => {
    const posterBoxAp = document.querySelector(
      `#share_modal_${postId} .poster_box_ap`
    );
    const postShareBox = document.querySelector(
      `#share_modal_${postId} .post_share_box`
    );
    const images = document.querySelectorAll(
      `#post-${postId} .img_list .list_inner a img`
    );
    let url = DEFAULT_COVER;
    if (images != null && images.length > 0) {
      const urlFromDom = images[0].src;
      urlFromDom.indexOf(location.origin) !== -1 && (url = urlFromDom);
    }
    const contentDom = document.querySelector(
      `#post-${postId} .entry-content .t_content p`
    );
    const linkDom = document.querySelector(
      `#post-${postId} .entry-content .p_title a`
    );
    const timeDom = document.querySelector(
      `#post-${postId} .list_user_meta .name time`
    );
    const date = new Date(timeDom.getAttribute("datetime"));

    return {
      posterBoxAp,
      postShareBox,
      data: {
        dateOfDay: date.getDate(),
        dateOfYearAndMonth: `${date.getFullYear()}/${date.getMonth() + 1}`,
        cover: url,
        cardTitle: `${siteTitle} - 片刻`,
        content: contentDom.innerText,
        link: linkDom.href,
        siteLogo,
        siteDesc,
      },
    };
  };

  const SayCardInit = () => {
    document.querySelectorAll(".pix_share_btn").forEach((item) => {
      item.onclick = null;
      for (let i = 0; i < item.children.length; i++) {
        item.children[i].onclick = null;
      }
      const originalA = item.children[0];
      const postId = originalA.getAttribute("poster-data");
      originalA.classList.remove("cr_poster");
      item.onclick = () => {
        const { posterBoxAp, postShareBox, data } = dataFromPost(postId);
        base64ForCard(data).then((base64) => {
          const div = document.createElement("div");
          div.classList.add("poster_box");
          div.style.border = "1px solid rgb(240, 240, 240)";
          const img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = base64;
          div.appendChild(img);
          posterBoxAp.innerHTML = "";
          posterBoxAp.appendChild(div);
          postShareBox.classList.remove("hide");
          const last = postShareBox.lastElementChild;
          last.href = base64;
          last.setAttribute("download", `poster_${postId}.png`);
        });
      };
    });
  };
  const windowSizeHanlder = () => {
    if (window.innerWidth < 800) {
      fontSize = {
        date: "40px",
        yearMonth: "12px",
        title: "20px",
        description: "14px",
        logoDesc: "16px",
      };
    } else {
      fontSize = {
        date: "70px",
        yearMonth: "18px",
        title: "25px",
        description: "18px",
        logoDesc: "20px",
      };
    }
    date.style.fontSize = fontSize.date;
    yearMonth.style.fontSize = fontSize.yearMonth;
    title.style.fontSize = fontSize.title;
    description.style.fontSize = fontSize.description;
    logoDesc.style.fontSize = fontSize.logoDesc;
  };
  cardDomInit();
  window.addEventListener("DOMContentLoaded", () => {
    windowSizeHanlder();
    loadSiteInfo();
    SayCardInit();
    const postItem = document.querySelector("#post_item");
    postItem?.addEventListener("DOMNodeInserted", () => {
      debounce(() => {
        SayCardInit();
      }, 50)();
    });
  });
})();

不过用下来，我觉得体验不是很好，首先是没有动画，当然，多折腾一下就好了，但是我比较懒 🫠

实现上，我觉得这件事需要配合编辑 PHP 来完成，仅仅靠 JS 能做到，但是不是很优雅，比如代码中我通过 JS 移除了原有的 click 监听以及一段会导致请求调用的 attr，然后重新加入了一个新的 click 监听...
不过对于使用者来说，仅 JS 还是会更加方便，毕竟只需要加入一个标签即可 🤔