From 31efdeb37ed9cae9b383b5b24f7b30c56d273362 Mon Sep 17 00:00:00 2001 From: karashiiro <49822414+karashiiro@users.noreply.github.com> Date: Sat, 29 May 2021 15:42:10 -0700 Subject: [PATCH 1/5] Add custom background support to createCard --- create-card.js | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/create-card.js b/create-card.js index 5318e47..fb630d3 100644 --- a/create-card.js +++ b/create-card.js @@ -88,6 +88,16 @@ class CardCreator { this.isInit = false; } + /** + * The canvas's dimensions. + */ + get canvasSize() { + return { + width: 890, + height: 720, + }; + } + /** * Ensures that the instance is ready to generate character cards. * This function must be resolved before using character card @@ -260,6 +270,10 @@ class CardCreator { /** * Creates a character card for a character. * @param {number | string} charaId The Lodestone ID of the character to generate a card for. + * @param {string | Buffer | null | undefined} customImage Optional parameter providing a custom + * image to be used instead of Lodestone assets. The image should be the same resolution as + * the default image. The default image size can be retrieved with {@link CardCreator#canvasSize}. + * May be a URL, `data: `URI or a local file path or a Buffer instance. * @example * const fs = require("fs"); * @@ -274,18 +288,25 @@ class CardCreator { * }); * @returns {Promise} A promise representating the construction of the card's image data. */ - async createCard(charaId) { - var response = await fetch(`https://xivapi.com/character/${charaId}?extended=1&data=FC,mimo`); - var data = await response.json(); + async createCard(charaId, customImage) { + const response = await fetch(`https://xivapi.com/character/${charaId}?extended=1&data=FC,mimo`); + const data = await response.json(); - const canvas = createCanvas(890, 720); + const canvasSize = this.canvasSize; + const canvas = createCanvas(canvasSize.width, canvasSize.height); const ctx = canvas.getContext("2d"); - var portrait = await loadImage(data.Character.Portrait); + if (customImage != null) { + const bg = await loadImage(customImage); - ctx.drawImage(this.bgImage, 0, 0, 890, 722); + ctx.drawImage(bg, 0, 0, 890, 722); + } else { + const portrait = await loadImage(data.Character.Portrait); - ctx.drawImage(portrait, 0, 120, 441, 600); + ctx.drawImage(this.bgImage, 0, 0, 890, 722); + + ctx.drawImage(portrait, 0, 120, 441, 600); + } ctx.strokeStyle = white; ctx.fillStyle = black; From 53d030b5cf7ca8180d955aecfd61ebbc7bb99b48 Mon Sep 17 00:00:00 2001 From: karashiiro <49822414+karashiiro@users.noreply.github.com> Date: Sat, 29 May 2021 15:44:24 -0700 Subject: [PATCH 2/5] Use new canvasSize property in method --- create-card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create-card.js b/create-card.js index fb630d3..a03d0bd 100644 --- a/create-card.js +++ b/create-card.js @@ -303,7 +303,7 @@ class CardCreator { } else { const portrait = await loadImage(data.Character.Portrait); - ctx.drawImage(this.bgImage, 0, 0, 890, 722); + ctx.drawImage(this.bgImage, 0, 0, canvasSize.width, canvasSize.height + 2); ctx.drawImage(portrait, 0, 120, 441, 600); } From dfe72a02d42c0be4ca66a088e876bf3d36d181cf Mon Sep 17 00:00:00 2001 From: karashiiro <49822414+karashiiro@users.noreply.github.com> Date: Sat, 29 May 2021 15:52:34 -0700 Subject: [PATCH 3/5] Draw the custom image over the default --- create-card.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/create-card.js b/create-card.js index a03d0bd..b425be1 100644 --- a/create-card.js +++ b/create-card.js @@ -296,16 +296,16 @@ class CardCreator { const canvas = createCanvas(canvasSize.width, canvasSize.height); const ctx = canvas.getContext("2d"); + const portrait = await loadImage(data.Character.Portrait); + + ctx.drawImage(this.bgImage, 0, 0, canvasSize.width, canvasSize.height + 2); + + ctx.drawImage(portrait, 0, 120, 441, 600); + if (customImage != null) { const bg = await loadImage(customImage); - ctx.drawImage(bg, 0, 0, 890, 722); - } else { - const portrait = await loadImage(data.Character.Portrait); - - ctx.drawImage(this.bgImage, 0, 0, canvasSize.width, canvasSize.height + 2); - - ctx.drawImage(portrait, 0, 120, 441, 600); + ctx.drawImage(bg, 0, 0, canvasSize.width, canvasSize.height); } ctx.strokeStyle = white; From abb8acfbe0304254b3f5813d2fad42a4b4a20efd Mon Sep 17 00:00:00 2001 From: karashiiro <49822414+karashiiro@users.noreply.github.com> Date: Sat, 29 May 2021 15:53:08 -0700 Subject: [PATCH 4/5] Update documentation --- create-card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create-card.js b/create-card.js index b425be1..097492e 100644 --- a/create-card.js +++ b/create-card.js @@ -271,7 +271,7 @@ class CardCreator { * Creates a character card for a character. * @param {number | string} charaId The Lodestone ID of the character to generate a card for. * @param {string | Buffer | null | undefined} customImage Optional parameter providing a custom - * image to be used instead of Lodestone assets. The image should be the same resolution as + * image to be drawn over the character card. The image should be the same resolution as * the default image. The default image size can be retrieved with {@link CardCreator#canvasSize}. * May be a URL, `data: `URI or a local file path or a Buffer instance. * @example From 04506ded4eb0e2df646ee15989e7a453bcf4d517 Mon Sep 17 00:00:00 2001 From: karashiiro <49822414+karashiiro@users.noreply.github.com> Date: Sat, 29 May 2021 17:37:57 -0700 Subject: [PATCH 5/5] Reword createCard documentation --- create-card.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/create-card.js b/create-card.js index 097492e..dfa76d7 100644 --- a/create-card.js +++ b/create-card.js @@ -271,9 +271,10 @@ class CardCreator { * Creates a character card for a character. * @param {number | string} charaId The Lodestone ID of the character to generate a card for. * @param {string | Buffer | null | undefined} customImage Optional parameter providing a custom - * image to be drawn over the character card. The image should be the same resolution as - * the default image. The default image size can be retrieved with {@link CardCreator#canvasSize}. - * May be a URL, `data: `URI or a local file path or a Buffer instance. + * image to be drawn between the background of the character card and the black information boxes. + * The image should be the same resolution as the default image. The default image size can be + * retrieved with {@link CardCreator#canvasSize}. May be a URL, `data: `URI, a local file path, + * or a Buffer instance. * @example * const fs = require("fs"); *