I have been searching for a Deno/TypeScript code snippet that can create basic images with dimensions embedded on them. I have provided an example of the code below, which generates images in JPEG format, base64, and dataURL.
The code works by adding RGB pixels one by one into a Number Array to build the image.
// Import jpeg encoder
import { encode as pixelsToBin } from "https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d474d584e5d5a7948504f">[email protected]</a>/mod.ts";
// Import std base64 encoder
import { encode as binTob64 } from "https://deno.land/std/encoding/base64.ts";
// Create a jpeg Image with RED, GREEN, BLUE & ALPHA colors
/***
*
* Material Design Colors | Scale 500
*
* 19 colors
*
* RED ---------> #f44336 -> rgba(244, 67, 54, 1)
* PINK --------> #e91e63 -> rgba(233, 30, 99, 1)
* PURPLE ------> #9c27b0 -> rgba(156, 39, 176, 1)
* DEEP-PURPLE --> #673ab7 -> rgba(103, 58, 183, 1)
* INDIGO ------> #3f51b5 -> rgba(63, 81, 181, 1)
* BLUE --------> #2196f3 -> rgba(63, 81, 181, 1)
* LIGHT-BLUE --> #03a9f4 -> rgba(3, 169, 244, 1)
* CYAN --------> #00bcd4 -> rgba(0, 188, 212, 1)
* TEAL --------> #009688 -> rgba(0, 150, 136, 1)
* GREEN -------> #4caf50 -> rgba(76, 175, 80, 1)
* LIGHT-GREEN -> #8bc34a -> rgba(139, 195, 74, 1)
* LIME --------> #cddc39 -> rgba(205, 220, 57, 1)
* YELLOW ------> #ffeb3b -> rgba(255, 235, 59, 1)
* AMBER -------> #ffc107 -> rgba(255, 193, 7, 1)
* ORANGE ------> #ff9800 -> rgba(255, 152, 0, 1)
* DEEP-ORANGE -> #ff5722 -> rgba(255, 87, 34, 1)
* BROWN -------> #795548 -> rgba(121, 85, 72, 1)
* GREY --------> #9e9e9e -> rgba(158, 158, 158, 1)
* BLUE-GREY ---> #607d8b -> rgba(96, 125, 139, 1)
*
*/
// Function to convert HEX color to RGB color
function hexToRgb(cHex): Array<number> {
const r = parseInt(cHex.slice(1, 3), 16);
const g = parseInt(cHex.slice(3, 5), 16);
const b = parseInt(cHex.slice(5, 7), 16);
// return {r, g, b} // return an object
return [ r, g, b ];
}
async function saveJpeg(w: number, h: number, cHex: string, fileName: string) {
// Dimensions of the generated jpeg image
const jpegWidth: number = w;
const jpegHeight: number = h;
const jpegArea: number = (jpegWidth * jpegHeight);
// Set RGB color based on input HEX color
const jpegPixelColor: number[] = hexToRgb(cHex);
// Initialize the array to store pixel values
let jpegPixels: number[] = [];
for(let i=0; i < jpegArea; i++) {
jpegPixels.push(jpegPixelColor[0]);
jpegPixels.push(jpegPixelColor[1]);
jpegPixels.push(jpegPixelColor[2]);
jpegPixels.push(1); // alpha channel value - ignored in JPEGs
}
// Define the structure of the image
const jpegImage: Image = {
width: jpegWidth,
height: jpegHeight,
data: new Uint8Array(jpegPixels)
}
// Encode image data to jpeg format
const jpegRaw: Image = pixelsToBin(jpegImage, 100); //Quality 100 (default is 50)
// Save the binary image to the file system
await Deno.writeFile(`${fileName}.jpg`, jpegRaw.data);
}
// Save the jpeg image with specified dimensions, color, and name
await saveJpeg(640, 360, "#f44336", "red-500");
await saveJpeg(640, 360, "#4caf50", "green-500");
await saveJpeg(640, 360, "#2196f3", "blue-500");
Given the capabilities of this library, achieving embedding image dimensions onto the image itself would involve implementing additional logic within the code.