From 5f2b4540f27ba4697ae6d083d3e07334e10debc5 Mon Sep 17 00:00:00 2001 From: Giannis Chatziveroglou Date: Tue, 5 Jul 2022 11:52:39 +0300 Subject: [PATCH] Add discriminator for discord image --- api/img-generator/generator.ts | 14 ++++--- api/img-generator/handler.ts | 3 +- api/img-generator/identity-image.ts | 58 +++++++++++++++++++---------- 3 files changed, 50 insertions(+), 25 deletions(-) diff --git a/api/img-generator/generator.ts b/api/img-generator/generator.ts index 81e292a..772f16f 100755 --- a/api/img-generator/generator.ts +++ b/api/img-generator/generator.ts @@ -19,7 +19,8 @@ export async function getImage( nameParam: string, imgUri: string, textParam: string, - cluster: string | null + cluster: string | null, + proxy?: string ): Promise { console.log( `Handling img generatation for mintId (${mintId}) imgUri (${imgUri}) text (${textParam}) and cluster (${ @@ -42,8 +43,8 @@ export async function getImage( !tokenData.useInvalidatorData && cluster !== "devnet" ) { - console.log("Falling back to devnet metadata"); - return getImage(mintId, nameParam, imgUri, textParam, "devnet"); + console.log("Falling back to devnet image"); + return getImage(mintId, nameParam, imgUri, textParam, "devnet", proxy); } const originalMint = tokenData?.certificateData?.parsed @@ -62,9 +63,12 @@ export async function getImage( } } + const parsedProxy = proxy ? proxy === "true" : false; + console.log("parsedProxy", parsedProxy, proxy); if ( tokenData?.metaplexData?.parsed.data.symbol === "NAME" || - (textParam && textParam.includes("@")) + (textParam && textParam.includes("@")) || + parsedProxy ) { const mintName = originalTokenData?.metaplexData?.parsed.data.name || @@ -77,7 +81,7 @@ export async function getImage( : breakIdentity(mintName || textParam || "")[1]; if (namespace && IDENTITIES.includes(namespace)) { - return getIdentityImage(namespace, entryName); + return getIdentityImage(namespace, entryName, parsedProxy); } else { try { const data = await promises.readFile( diff --git a/api/img-generator/handler.ts b/api/img-generator/handler.ts index 904dbc2..77b0ec0 100755 --- a/api/img-generator/handler.ts +++ b/api/img-generator/handler.ts @@ -7,7 +7,8 @@ module.exports.generate = async (event) => { event.queryStringParameters && event.queryStringParameters.name, event.queryStringParameters && event.queryStringParameters.uri, event.queryStringParameters && event.queryStringParameters.text, - event.queryStringParameters && event.queryStringParameters.cluster + event.queryStringParameters && event.queryStringParameters.cluster, + event.queryStringParameters && event.queryStringParameters.proxy ); console.log("Returning image buffer", buffer); diff --git a/api/img-generator/identity-image.ts b/api/img-generator/identity-image.ts index 74376c6..bf95d37 100755 --- a/api/img-generator/identity-image.ts +++ b/api/img-generator/identity-image.ts @@ -6,8 +6,12 @@ const IDENTITY_COLORS: { [key: string]: string } = { discord: "#5866f2", }; -export async function getIdentityImage(namespace: string, handle: string) { - console.log(`Rending ${namespace} image`); +export async function getIdentityImage( + namespace: string, + handle: string, + proxy?: boolean +) { + console.log(`Rendering ${namespace} image`); // setup canvas.registerFont(__dirname.concat("/fonts/SF-Pro.ttf"), { @@ -29,7 +33,13 @@ export async function getIdentityImage(namespace: string, handle: string) { nameCtx.textAlign = "center"; nameCtx.textBaseline = "middle"; - const nameText = formatName(namespace, handle); + let nameText = decodeURIComponent(formatName(namespace, handle)); + let topRightText: string | undefined; + if (namespace === "discord") { + const temp = nameText.split("#"); + nameText = temp.slice(0, -1).join(); + topRightText = temp.pop(); + } nameCtx.fillText(nameText, WIDTH * 0.5, HEIGHT * 0.5); nameCtx.textAlign = "left"; @@ -46,26 +56,28 @@ export async function getIdentityImage(namespace: string, handle: string) { HEIGHT * 0.18 ); - const bottomLeftCtx = imageCanvas.getContext("2d"); - bottomLeftCtx.textAlign = "left"; - let bottomLeft = PADDING * 1.5; + if (!proxy) { + const bottomLeftCtx = imageCanvas.getContext("2d"); + bottomLeftCtx.textAlign = "left"; + let bottomLeft = PADDING * 1.5; - bottomLeftCtx.font = `${0.055 * WIDTH}px SFPro`; - bottomLeftCtx.fillStyle = "white"; - bottomLeftCtx.drawImage( - await canvas.loadImage(__dirname.concat("/assets/infinity.png")), - PADDING, - HEIGHT - bottomLeft - 0.08 * WIDTH, - 0.15 * WIDTH, - 0.15 * WIDTH - ); - bottomLeft += 0.075 * WIDTH; + bottomLeftCtx.font = `${0.055 * WIDTH}px SFPro`; + bottomLeftCtx.fillStyle = "white"; + bottomLeftCtx.drawImage( + await canvas.loadImage(__dirname.concat("/assets/infinity.png")), + PADDING, + HEIGHT - bottomLeft - 0.08 * WIDTH, + 0.15 * WIDTH, + 0.15 * WIDTH + ); + bottomLeft += 0.075 * WIDTH; + } - const topLextCtx = imageCanvas.getContext("2d"); + const topLeftCtx = imageCanvas.getContext("2d"); let topLeft = PADDING; if (IDENTITIES.includes(namespace)) { if (namespace === "twitter") { - topLextCtx.drawImage( + topLeftCtx.drawImage( await canvas.loadImage( __dirname.concat("/assets/twitter-white-logo.png") ), @@ -75,7 +87,7 @@ export async function getIdentityImage(namespace: string, handle: string) { 0.15 * HEIGHT ); } else if (namespace === "discord") { - topLextCtx.drawImage( + topLeftCtx.drawImage( await canvas.loadImage(__dirname.concat("/assets/discord-logo.png")), topLeft, PADDING, @@ -86,6 +98,14 @@ export async function getIdentityImage(namespace: string, handle: string) { topLeft += 0.11 * WIDTH; } + if (topRightText) { + const topRightCtx = imageCanvas.getContext("2d"); + topRightCtx.font = `${0.08 * WIDTH}px SFPro`; + topRightCtx.fillStyle = "white"; + topRightCtx.textAlign = "right"; + topRightCtx.fillText("#" + topRightText, WIDTH * 0.95, HEIGHT * 0.1); + } + const buffer = imageCanvas.toBuffer("image/png"); return buffer; }