diff --git a/README.md b/README.md index f2288beb..83b4335c 100644 --- a/README.md +++ b/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. diff --git a/commands/edit-image/desaturate.js b/commands/edit-image/desaturate.js new file mode 100644 index 00000000..9355a919 --- /dev/null +++ b/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!`); + } + } +}; diff --git a/util/Canvas.js b/util/Canvas.js index 716de162..050febc4 100644 --- a/util/Canvas.js +++ b/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);