Add `encoding` output option

[zachleat]

• Write images in output?
• Maybe as a larger option for Custom addExtension templates too?

In this tweet Lea is attempting to make a PNG from a canvas buffer using Pagination:

https://twitter.com/LeaRosema/status/1520102346566647808

[zachleat]

via https://twitter.com/LeaRosema/status/1520082647233540102

[zachleat]

Just spitballing here, maybe support returning { content, encoding } from render, which would also work out of the box with addExtension

[learosema]

Here's my provided sample og-images.11ty.js code from the image above. I added eleventyExcludeFromCollections and the mime type which I forgot to provide when I posted the tweet:

const { createCanvas } = require('canvas');

class OgImages {
  data() {
    return {
      eleventyExcludeFromCollections: true,
      pagination: {
        size: 1,
        data: 'collections.all',
        alias: 'post',
      },
      permalink(data) {
        return `/images/og/${this.slug(data.post.data.title)}.png`;
      },
    };
  }

  render(data) {
    const mycanvas = createCanvas(500, 500);
    const ctx = mycanvas.getContext('2d');
    ctx.font = '12px "sans"';
    ctx.fillText(data.post.data.title, 250, 10);
    const buf = mycanvas.toBuffer('image/png', { compressionLevel: 9 });
    return buf;
  }
}

module.exports = OgImages;