Cub's Contraption

v0 to v1.0 is directed towards making cubfan135's thumbnail-maker. Cub is the veteran of veterans. His thumbnails are so simple yet so outstanding.

Analysis

We have analysed his thumbnails from his first HC season to the current season. Following is a typical thumbnail.

His thumbnail consists of a background image(namely a screenshot), the season logo, and the episode number.

How we did it?

Cubfan's thumbnail-maker is up and running here. It is fully functional.

We are using the HTML canvas element for previewing the result. Ultimately the same preview gets converted into a PNG image as the final result. Hence it is a What You See Is What You Get editor. The canvas is sized to 1920x1080. It is scaled down to 360p by CSS. Thus the preview is in 360p but the result is in 1080p.

Step 1

Cub's Contraption is a 3 step editor. Step one is to choose the background image. We allow the user to choose an image via a simple <input type="file"> line. The canvas automatically updates itself once the user chooses an image with the help of the onchange listener of the input tag. This javasript code continues the process.

function editOnCanvas() {
    let bgImage = new Image();
    bgImage.addEventListener('load', () => {
        ctx.drawImage(bgImage, 0, 0, 1920, 1280);
        hcLogo();
        episodeNum();
    }, false);

    bgImage.src = URL.createObjectURL(bgInput.files[0]);
}

The above code creates a new Image(), defines its source to the file selected from the input tag, waits for the image to load, when the image loads it scales the image to 1080p, draws the image and finally it calls hcLogo() and episodeNum() to add the season logo and episode number if asked by the user.

Step 2

Step 2 is to add the episode number. The user enters the episode number and when the text-field is unfocused, the canvas updates to show the episode number. This is achieved by this simple piece of code.

function episodeNum() {
    let epNum = epNumSelector.value;

    ctx.fillStyle = '#fff';
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 7;
    ctx.font = 'bold 300px Tahoma';
    ctx.textBaseline = 'bottom';

    ctx.fillText(epNum, 20, 1270);
    ctx.strokeText(epNum, 20, 1270);
    ctx.fill();
    ctx.stroke();
}

First of all this function gets the episode number from input type="text" named epNumSelector. The next blocks of code style text to match Cub's style. The next block places the text at the correct position and fills & strokes the text.

Step 3

This final steps added the Hermitcraft logo Cub uses. This is the code.

function hcLogo() {
    if (hcLogoToggler.checked) {
        let hc7Logo = new Image()
        hc7Logo.addEventListener('load', () => {
            ctx.drawImage(hc7Logo, 40, 10, 1800, 230)
        })
        hc7Logo.src = ("https://hermit-tools.github.io/Thumbnail-Maker/hc7logobydnator.png");
        hc7Logo.crossOrigin = 'Anonymous';
    }
}

Nothing too special to see here. It is very similar to the code specified in Step 1. But instead of taking the image from an input tag, it takes the image from a URL. The last line is required as it stops CORB(a browser security system) from blocking the image to load.