添加跨域图片转发；完善生成专属链接保存海报功能

app/generatelink/[user_id]/page.jsx

@@ -5,8 +5,6 @@ import baseRequest from "@/utils/baseRequest";
 import { Toast } from "antd-mobile";
 import { generateSignature } from "@/utils/crypto";
 import Image from "next/image";
-import verification from "@/public/icon/verification.png";
-import platform_wechat from "@/public/images/platform_wechat.png";
 import html2canvas from "html2canvas";
 
 export default function GenerateLink({ params }) {
@@ -79,6 +77,7 @@ export default function GenerateLink({ params }) {
       useCORS: true,
     });
     const data = canvas.toDataURL("image/jpg");
+
     window.ReactNativeWebView.postMessage(
       JSON.stringify({
         type: "SAVE_IMAGE",
@@ -137,23 +136,33 @@ export default function GenerateLink({ params }) {
       </div>
       <div
         id="print"
-        className="flex flex-1 scale-90 flex-col container relative"
+        className="flex flex-1 scale-90 flex-col container bg-[#07050A] relative"
       >
-        <div className="absolute top-0 left-0 w-full">
-          <div className="relative">
+        <div className="absolute top-0 left-0 w-full z-0">
+          <div className="relative w-full h-64 overflow-hidden">
             <img
-              src={data?.cover?.images[0].urls[0]}
+              src={
+                "/cors/" +
+                data?.cover?.images[0].urls[0].split(
+                  "https://file.tiefen.fun/"
+                )[1]
+              }
               alt=""
-              className="w-full h-64 object-cover object-center opacity-30"
+              className="w-full object-cover opacity-30"
             />
             <div className="absolute top-0 left-0 w-full h-64 bg-gradient-to-t from-[#07050A] to-[#00000000]"></div>
           </div>
         </div>
-        <div className="flex flex-col flex-1 px-4 py-2 z-10">
+        <div className="flex flex-col flex-1 px-4 py-2 z-10 relative">
           <div className="flex flex-col items-center mt-24">
             <div className="w-[74px] h-[74px] rounded-full overflow-hidden">
               <img
-                src={data?.avatar?.images[0].urls[0]}
+                src={
+                  "/cors/" +
+                  data?.avatar?.images[0].urls[0].split(
+                    "https://file.tiefen.fun/"
+                  )[1]
+                }
                 alt=""
                 className="w-full object-cover"
               />
@@ -162,7 +171,9 @@ export default function GenerateLink({ params }) {
               <p className="text-white text-2xl font-medium mr-1">
                 {data?.name}
               </p>
-              <Image src={verification} alt="" className="w-6 h-6" />
+              <div className="w-6 h-6">
+                <img src="/icon/verification.png" alt="" className="w-full" />
+              </div>
             </div>
             <p className="text-secondary text-sm text-center font-medium mt-3 px-4">
               {data?.bio}
@@ -170,7 +181,13 @@ export default function GenerateLink({ params }) {
           </div>
           <div className="flex flex-col mt-8 bg-[#FFFFFF1A] rounded-2xl">
             <div className="flex flex-row cursor-pointer bg-[#07050A] border-2 border-[#FFFFFF26] rounded-2xl h-12 items-center justify-center">
-              <Image src={platform_wechat} alt="" className="w-5 h-5" />
+              <div className="w-5 h-5">
+                <img
+                  src="/images/platform_wechat.png"
+                  alt=""
+                  className="w-full object-cover"
+                />
+              </div>
               <p className="text-white text-base font-medium ml-2">我的微信</p>
             </div>
           </div>
@@ -180,7 +197,12 @@ export default function GenerateLink({ params }) {
               className="flex flex-row cursor-pointer bg-[#07050A] border-2 border-[#FFFFFF26] rounded-2xl h-12 items-center justify-center mt-4"
             >
               <img
-                src={item.icon.images[0].urls[0]}
+                src={
+                  "/cors/" +
+                  item.icon.images[0].urls[0].split(
+                    "https://file.tiefen.fun/"
+                  )[1]
+                }
                 alt=""
                 className="w-5 h-5"
               />
@@ -190,7 +212,7 @@ export default function GenerateLink({ params }) {
             </div>
           ))}
         </div>
-        <div className="flex justify-center">
+        <div className="flex justify-center pt-2 pb-4">
           {qrcodeUrl && (
             <Image
               className="aspect-square object-contain rounded-xl"

next.config.js

@@ -6,6 +6,10 @@ const nextConfig = {
         source: "/api/:path*",
         destination: "https://api.tiefen.fun/api/:path*",
       },
+      {
+        source: "/cors/:path*",
+        destination: "https://file.tiefen.fun/:path*",
+      },
     ];
   },
   transpilePackages: ["crypto-js"],