Desaturate Command

README.md

@@ -227,7 +227,7 @@ in the appropriate channel's topic to use it.
 
 ## Commands
 
-Total: 482
+Total: 483
 
 ### Utility:
 
@@ -561,6 +561,7 @@ Total: 482
 * **contrast:** Draws an image or a user's avatar but with contrast.
 * **convert-image:** Converts an image or user's avatar from one format to another.
 * **create-qr-code:** Converts text to a QR Code.
+* **desaturate:** Draws an image or a user's avatar but desaturated.
 * **dexter:** Draws an image or a user's avatar over the screen of Dexter from Pokémon.
 * **distort:** Draws an image or a user's avatar but distorted.
 * **fire-frame:** Draws a fiery border over an image or a user's avatar.

commands/edit-image/desaturate.js

@@ -0,0 +1,49 @@
+const Command = require('../../structures/Command');
+const { createCanvas, loadImage } = require('canvas');
+const request = require('node-superfetch');
+const { desaturate } = require('../../util/Canvas');
+
+module.exports = class DesaturateCommand extends Command {
+	constructor(client) {
+		super(client, {
+			name: 'desaturate',
+			group: 'edit-image',
+			memberName: 'desaturate',
+			description: 'Draws an image or a user\'s avatar but desaturated.',
+			throttling: {
+				usages: 1,
+				duration: 10
+			},
+			clientPermissions: ['ATTACH_FILES'],
+			args: [
+				{
+					key: 'level',
+					prompt: 'What level of desaturation would you like to use?',
+					type: 'integer'
+				},
+				{
+					key: 'image',
+					prompt: 'What image would you like to edit?',
+					type: 'image',
+					default: msg => msg.author.displayAvatarURL({ format: 'png', size: 512 })
+				}
+			]
+		});
+	}
+
+	async run(msg, { level, image }) {
+		try {
+			const { body } = await request.get(image);
+			const data = await loadImage(body);
+			const canvas = createCanvas(data.width, data.height);
+			const ctx = canvas.getContext('2d');
+			ctx.drawImage(data, 0, 0);
+			desaturate(ctx, level, 0, 0, data.width, data.height);
+			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: 'desaturate.png' }] });
+		} catch (err) {
+			return msg.reply(`Oh no, an error occurred: \`${err.message}\`. Try again later!`);
+		}
+	}
+};

util/Canvas.js

@@ -60,6 +60,23 @@ module.exports = class CanvasUtil {
 		return ctx;
 	}
 
+	static desaturate(ctx, level, x, y, width, height) {
+		const data = ctx.getImageData(x, y, width, height);
+		for (let i = 0; i < height; i++) {
+			for (let j = 0; j < width; j++) {
+				const dest = ((j * width) + i) * 4;
+				const grey = Number.parseInt(
+					(0.2125 * data.data[dest]) + (0.7154 * data.data[dest + 1]) + (0.0721 * data.data[dest + 2])
+				, 10);
+				data.data[dest] += level * (grey - data.data[dest]);
+				data.data[dest + 1] += level * (grey - data.data[dest + 1]);
+				data.data[dest + 2] += level * (grey - data.data[dest + 2]);
+			}
+		}
+		ctx.putImageData(data, x, y);
+		return ctx;
+	}
+
 	static distort(ctx, amplitude, x, y, width, height, strideLevel = 4) {
 		const data = ctx.getImageData(x, y, width, height);
 		const temp = ctx.getImageData(x, y, width, height);