Subtitle Command

README.md

@@ -227,7 +227,7 @@ in the appropriate channel's topic to use it.
 
 ## Commands
 
-Total: 472
+Total: 473
 
 ### Utility:
 
@@ -590,6 +590,7 @@ Total: 472
 * **spongebob-time-card:** Sends a Spongebob Time Card with the text of your choice.
 * **square:** Draws an image or a user's avatar as a square.
 * **squish:** Draws an image or a user's avatar but squished across the X or Y axis.
+* **subtitle:** Adds subtitles to an image.
 * **tint:** Draws an image or a user's avatar but tinted a specific color.
 * **tweet:** Sends a Twitter tweet with the user and text of your choice.
 * **zero-dialogue:** Sends a text box from Megaman Zero with the quote of your choice.
@@ -1013,6 +1014,7 @@ here.
 	* steam-card ([Noto Font](https://www.google.com/get/noto/))
 	* steam-now-playing ([Noto Font](https://www.google.com/get/noto/))
 	* steam-now-playing-classic ([Noto Font](https://www.google.com/get/noto/))
+	* subtitle ([Noto Font](https://www.google.com/get/noto/))
 	* translate ([Google Translate](https://translate.google.com/))
 	* tweet ([Noto Font](https://www.google.com/get/noto/))
 	* two-buttons ([Noto Font](https://www.google.com/get/noto/))

commands/edit-image/subtitle.js

@@ -0,0 +1,78 @@
+const Command = require('../../structures/Command');
+const { createCanvas, loadImage, registerFont } = require('canvas');
+const request = require('node-superfetch');
+const path = require('path');
+const { wrapText } = require('../../util/Canvas');
+registerFont(path.join(__dirname, '..', '..', 'assets', 'fonts', 'Noto-Regular.ttf'), { family: 'Noto' });
+registerFont(path.join(__dirname, '..', '..', 'assets', 'fonts', 'Noto-CJK.otf'), { family: 'Noto' });
+registerFont(path.join(__dirname, '..', '..', 'assets', 'fonts', 'Noto-Emoji.ttf'), { family: 'Noto' });
+
+module.exports = class SubtitleCommand extends Command {
+	constructor(client) {
+		super(client, {
+			name: 'subtitle',
+			aliases: ['sub'],
+			group: 'edit-image',
+			memberName: 'subtitle',
+			description: 'Adds subtitles to an image.',
+			throttling: {
+				usages: 1,
+				duration: 10
+			},
+			clientPermissions: ['ATTACH_FILES'],
+			credit: [
+				{
+					name: 'Google',
+					url: 'https://www.google.com/',
+					reason: 'Noto Font',
+					reasonURL: 'https://www.google.com/get/noto/'
+				}
+			],
+			args: [
+				{
+					key: 'text',
+					prompt: 'What should the subtitles say?',
+					type: 'string',
+					max: 50
+				},
+				{
+					key: 'image',
+					prompt: 'What image would you like to edit?',
+					type: 'image',
+					default: msg => msg.author.displayAvatarURL({ format: 'png', size: 512 })
+				}
+			]
+		});
+	}
+
+	async run(msg, { text, image }) {
+		try {
+			const { body } = await request.get(image);
+			const base = await loadImage(body);
+			const canvas = createCanvas(base.width, base.height);
+			const ctx = canvas.getContext('2d');
+			ctx.drawImage(base, 0, 0);
+			const fontSize = Math.round(base.height / 15);
+			ctx.font = `${fontSize}px Noto`;
+			ctx.fillStyle = 'yellow';
+			ctx.textAlign = 'center';
+			const lines = await wrapText(ctx, text, base.width - 10);
+			if (!lines) return msg.reply('There\'s not enough width to subtitle this image.');
+			ctx.textBaseline = 'bottom';
+			const initial = base.height - ((lines.length - 1) * fontSize) - ((lines.length - 1) * 10);
+			for (let i = 0; i < lines.length; i++) {
+				const textHeight = initial + (i * fontSize) + (i * 10);
+				ctx.strokeStyle = 'black';
+				ctx.lineWidth = 3;
+				ctx.strokeText(lines[i], base.width / 2, textHeight);
+				ctx.fillStyle = 'yellow';
+				ctx.fillText(lines[i], base.width / 2, textHeight);
+			}
+			const attachment = canvas.toBuffer();
+			if (Buffer.byteLength(attachment) > 8e+6) return msg.reply('Resulting image was above 8 MB.');
+			return msg.say({ files: [{ attachment, name: 'subtitle.png' }] });
+		} catch (err) {
+			return msg.reply(`Oh no, an error occurred: \`${err.message}\`. Try again later!`);
+		}
+	}
+};

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xiao",
-	"version": "116.15.4",
+	"version": "116.16.0",
 	"description": "Your personal server companion.",
 	"main": "Xiao.js",
 	"scripts": {