testing with base64

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "image-to-base64": "^2.2.0",
     "next": "11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

pages/api/[...id].ts

@@ -12,7 +12,7 @@ type Parameters = {
     animated?: string;
 }
 
-export default function handler(
+export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
@@ -22,15 +22,19 @@ export default function handler(
     res.setHeader("Content-Type", "image/svg+xml; charset=utf-8");
     res.setHeader("content-security-policy", "default-src 'none'; img-src *; style-src 'unsafe-inline'");
 
-    axios.get(`https://api.lanyard.rest/v1/users/${userid}`)
+    let lanyardData: any;
+
+    await axios.get(`https://api.lanyard.rest/v1/users/${userid}`)
     .then((response) => {
-        res.status(200).send(renderCard(response.data, params));
+        return lanyardData = response;
     })
     .catch((err) => {
         console.log(err);
         res.send({ error: 'Please provide a valid Discord user ID!' })
     });
 
+    let svg = await renderCard(lanyardData.data, params);
+    res.status(200).send(svg);
+
     console.log(req.query);
-    
-}
+}

src/renderCard.tsx

@@ -2,11 +2,13 @@ import * as LanyardTypes from './LanyardTypes';
 import { useState } from "react";
 import { getFlags } from "./getFlags";
 
+const imageToBase64 = require('image-to-base64');
+
 type Parameters = {
     animated?: string;
 }
 
-const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
+const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<any> => {
     
     let avatarBorderColor: string = "#747F8D";
     let userStatus: string = "";
@@ -16,8 +18,23 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
     if(body.data.activities.length > 0) {
         if(body.data.activities[Object.keys(body.data.activities).length - 1].type === 0) activity = body.data.activities[Object.keys(body.data.activities).length - 1];
     }
-
     
+    let avatar: string = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAY1BMVEVYZfJib/OMlfahqPeWn/eBi/XLz/vq6/7////19f5tePTq7P22vPnV2Pyrsvirsvl3gvT09f7Axfp3gfRtePNsePPg4v22vPq2u/qCi/WhqPjf4/zf4v2Xn/essvjLzvuXnvdbidFTAAAETElEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAIDZudMtV1UlDuCFRKlWIEJ6uOwbzXn/lzzzYc/GWiT6zya/79WrLeYSc5Vq9IFWa3Sr6JehWt0ZZn5RtFJvmHnodPsrPLx1/B9PKx1ziLOPnIRRO84EXaAP/CWnR3pArTWcybpA5G8NsX20pw+cSbpAngEeOQenY+Cf8KIZ4FuDfSV4Ko/7hS7wNjYH7W3MvNeHtn2jvxn+OXcgaP0x8KJo43vgnwqu85EXDfGVULWON9G1BOmDN/M/AnTgDSWC0xve0KAITeSsykFw4qzOQWB4YwNBOfLmPAHpeXsvr5XOgJkjGA3vIlU6A2bvOHvAnXwiCMrwTl5UpUtg5us7BAB2gcg78nXugaC6QORd+bo7AEAXiLwzX+8SANEFNHPdXcAwV90FDgxA037+zwAc7aZlCKnSNTDrADZBdU6DBwbha5wCAabBkWGkSqfAzFa6C8xeADYB9Y2ByEBsbSMAYAy0zHWPActQLPQuKBh3DiwiDRlwzwFOv9JfTpORh5x5rVfQc8CQiLLJiEMaA1oW6XgVq+grVh4yY56JA68x07fm8hCIhXCUPn823zgkG/HK4Rf6kYv8YBt5BQ03BQyv9CMq8M/JQ7IItw+e6cd8QQjKTqCX3OMTtOdCCNZOoCnqkrYgZEFD2/FF/08qDAE4Dji+TtHPKHknVmBboVB2i9HI9zIGahZUhaVqVxCyQEEVQ7rSBMj3QiPUUTCWJkC+8zrQVjzmELBYG2H5jDYUFqAiQDlMtAwKQgjr+nwoq9O2BSEQJQFVWKeNBSEQ6+BYeG3BFIUAHIfasmsLh7IQgLcjDZd0AWXEIZRDMDYCuuj73g95yJGxEuBLPmr6VBSyzMO9Fpzko3kqeA1r8W4GHOWNKQ/JIl4COL4SZf2lPAQhAY4lYrv860rlIVmHlYAsuBhjFwpCwO4LOkb0TMAzAc8EPBPwTMAGngl4JuCZgMig4jMB27AMykJUhCr4ekwzKI10T9hpwzcz6DNSUbRdORzThW/CJSKagd4LjKurof1suFCYVR54MDckpsBXDLk3pliQgxBTHneBrwiaNtOfeUUKCnMQYlKC32x2r7SlmSUpoOQdi5xtoqx1DNP8WW9kKSCVvAu8QnC2USR4/I2bP5vDmhS80pdOjXULw8dc7HSiL6ljYLTmz/ooKvJTdkqTt9G5s/mHczH6qXlV9I32Ehi0+QVfQbn7HryHhvY033V1Tuu3CRncOIj3rL3EV9pf7+53ced0bY+MIZm7ndEt9uNnkxN8OSWhAvjjZ8ktnIoKaMDHF0yH8S416C4Rpv7bU094pWJ9QFv4BJOBvnkFzjWKMvhu4G78IibMIz2EFM3KFUAwCEI+ID9MDia6kd/+enpFj+YE+af+aA8OZAAAAAAG+Vvf46sAAAAAAAAAAAAAAAAAAAAAAFYCeHSjWah9hFcAAAAASUVORK5CYII=";
+
+    {body.data.discord_user.avatar !== null ?
+        await imageToBase64(`https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=512`)
+        .then(
+            (encoded: string) => {
+                avatar = encoded; // "iVBORw0KGgoAAAANSwCAIA..."
+            }
+        )
+        .catch(
+            (error: any) => {
+                console.log(error); // Logs an error if there was one
+            }
+        ) 
+    : ''}
+
     if(body.data.discord_user.avatar !== null && body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
     if(params.animated === "false") avatarExtension = "webp";
 
@@ -45,9 +62,6 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
     return `
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="218px">
                 <foreignObject x="0" y="0" width="410" height="218">
-                    <head>
-                        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src *; style-src 'unsafe-inline'" />
-                    </head>
                     <div xmlns="http://www.w3.org/1999/xhtml" style="
                         position: absolute;
                         width: 400px;
@@ -78,7 +92,7 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                 width: 80px;
                             ">
                                 <img ${body.data.discord_user.avatar !== null ?
-                                    `src="https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=2048"` :
+                                    `src="data:image/png;base64,${avatar}"` :
                                     `src="https://discord.com/assets/1f0bfc0865d324c2587920a7d80c609b.png"`} 
                                 style="
                                     border: solid 3px ${avatarBorderColor};

yarn.lock

@@ -1661,6 +1661,13 @@ image-size@1.0.0:
   dependencies:
     queue "6.0.2"
 
+image-to-base64@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/image-to-base64/-/image-to-base64-2.2.0.tgz#743039f59dee15a5953a621ea8beeacbc487f99d"
+  integrity sha512-Z+aMwm/91UOQqHhrz7Upre2ytKhWejZlWV/JxUTD1sT7GWWKFDJUEV5scVQKnkzSgPHFuQBUEWcanO+ma0PSVw==
+  dependencies:
+    node-fetch "^2.6.0"
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2147,7 +2154,7 @@ next@11.0.0:
     vm-browserify "1.1.2"
     watchpack "2.1.1"
 
-node-fetch@2.6.1:
+node-fetch@2.6.1, node-fetch@^2.6.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==