Otter holding an emoji

otter-arms.svg

otter.js

const Canvas = require('canvas')
const emojip = require('twemoji-parser')

module.exports = {
  data: {
    name: 'otter',
    description: 'make an otter hold an emoji',
    options: [{
      type: 3,
      name: 'emoji',
      description: 'emoji to parse',
      required: true
    },
    {
      type: 4,
      name: 'x',
      description: 'x axis (default 128)',
      min_value: -256,
      max_value: 256
    },
    {
      type: 4,
      name: 'y',
      description: 'y axis (default 128)',
      min_value: -256,
      max_value: 256
    },
    {
      type: 4,
      name: 'rotate',
      description: 'rotate degrees (default -45)',
      min_value: -360,
      max_value: 360
    },
    {
      type: 4,
      name: 'size',
      description: 'size (default 90)',
      min_value: -256,
      max_value: 256
    }],
    type: 1
  },
  /**
  * @param {import('Eris').Client} client
  * @param {import('Eris').CommandInteraction} interaction
  * */
  async execute(client, interaction) {
    const emoji = interaction.data.options.find(x => x.name == 'emoji')
    const cx = interaction.data.options.find(x => x.name == 'x')?.value ?? 128
    const cy = interaction.data.options.find(x => x.name == 'y')?.value ?? 128
    const rotate = interaction.data.options.find(x => x.name == 'rotate')?.value ?? -45
    const size = interaction.data.options.find(x => x.name == 'size')?.value ?? 90

    // not the best way to parse an emoji but it works
    const p = emojip.parse(emoji.value)
    if(!p) return interaction.createMessage({ content: `i couldn't parse that emoji: ${emoji.value}`, flags: 64 })
    const res = emojiUnicode(emoji.value)

    interaction.createMessage({ content: '' }, [{
      name: 'test.png',
      file: await createImage({ res, cx, cy, rotate, size })
    }])
  }
}


// https://twemoji.maxcdn.com/v/latest/svg/${res}.svg
// https://twemoji.maxcdn.com/v/latest/72x72/${res}.png

async function createImage({ res, cx, cy, rotate, size }) {
  const canvas = Canvas.createCanvas(256, 256)
  const ctx = canvas.getContext('2d')
  const otter = await loadSVG('./otter.svg')
  const image = await loadSVG(`https://twemoji.maxcdn.com/v/latest/svg/${res}.svg`)
  const otter_arms = await loadSVG('./otter-arms.svg')

  ctx.drawImage(otter, 0, 0, 256, 256)
  image.width = image.height = size
  drawRotated(canvas, ctx, image, rotate, cx, cy)
  ctx.drawImage(otter_arms, 0, 0, 256, 256)

  return canvas.toBuffer()
}

// just to rotate an image
function drawRotated(canvas, ctx, image, degrees, x, y) {
  ctx.save()
  ctx.translate(x, y)
  ctx.rotate(degrees * Math.PI / 180)
  ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height)
  ctx.restore()
}

// svg can be streched
async function loadSVG(url, scale = 15) {
  const image = await Canvas.loadImage(url)
  image.width = image.naturalWidth * scale
  image.height = image.naturalHeight * scale
  return image
}

function emojiUnicode(e) {
  let comp
  if (e.length === 1) comp = e.charCodeAt(0)
  comp = (e.charCodeAt(0) - 0xD800) * 0x400 + (e.charCodeAt(1) - 0xDC00) + 0x10000
  if (comp < 0) comp = e.charCodeAt(0)
  return comp.toString('16')
}

otter.svg