aly/XIV-Character-Cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #13 from karashiiro/custom-backgrounds

Browse source 
Add custom image support to createCard
This commit is contained in:
karashiiro 2021-05-31 10:39:09 -07:00 committed by GitHub
commit e54bffe7fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
create-card.js
View file

@ -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,11 @@ 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 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");
*
@ -274,19 +289,26 @@ class CardCreator {
* });
* @returns {Promise<Buffer>} 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);
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);
if (customImage != null) {
const bg = await loadImage(customImage);
ctx.drawImage(bg, 0, 0, canvasSize.width, canvasSize.height);
}
ctx.strokeStyle = white;
ctx.fillStyle = black;
ctx.beginPath();