Old calendar layout

Ask for Help
11

The heck with AI (even though I used it to generate this code quickly :wink: ).

You could use javascript to create a DataURI Image from text inputs and display it in an image container. This is extremely crude and could use some cleanup and refinement, but it would give you what you are looking for.

// Function to generate a Data URI image from two text inputs
function generateImage(text1, text2) {
    // Create a canvas element
    var canvas = document.createElement('canvas');
    canvas.width = 300; // Set the canvas width
    canvas.height = 300; // Set the canvas height

    // Get the 2D rendering context
    var ctx = canvas.getContext('2d');

    // Set background color
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Set text properties
    ctx.font = '20px Arial';
    ctx.fillStyle = '#000000';

    // Display text on the canvas
    ctx.fillText(text1, 50, 50);
    ctx.fillText(text2, 50, 100);

    // Convert the canvas content to a Data URI
    var dataUri = canvas.toDataURL();

    return dataUri;
}

// Example usage
var text1 = "Hello";
var text2 = "World";
return generateImage(text1, text2);

Shoot, thinking about it more, we could actually create our own text overlays on top of images. Here is a modified version that also accepts an image input and overlays text on top. Kind of our own cloudinary inside of Glide.

// generateImage.js

// Function to generate a Data URI image from text inputs and overlay on an image
function generateImage(imageUrl, text1, text2) {
    // Create an image element
    var image = new Image();
    image.crossOrigin = "anonymous"; // Allow cross-origin requests for images
    image.src = imageUrl;

    // Create a canvas element
    var canvas = document.createElement('canvas');
    canvas.width = image.width; // Set the canvas width to the image width
    canvas.height = image.height; // Set the canvas height to the image height

    // Get the 2D rendering context
    var ctx = canvas.getContext('2d');

    // Draw the image on the canvas
    ctx.drawImage(image, 0, 0);

    // Set text properties
    ctx.font = '20px Arial';
    ctx.fillStyle = '#000000';

    // Display text on the canvas
    ctx.fillText(text1, 50, 50);
    ctx.fillText(text2, 50, 100);

    // Convert the canvas content to a Data URI
    var dataUri = canvas.toDataURL();

    return dataUri;
}

// Example usage
var imageUrl = 'https://dummyimage.com/300x300/bab1ba/fff';
var text1 = "Hello";
var text2 = "World";
return generateImage(imageUrl, text1, text2);
5 Likes