/**
* Converts a color image into a black and white stencil.
* Pixels are converted to grayscale first, and then based on a threshold, they are turned to either pure black or pure white.
* @param {Image} originalImg The original javascript Image object.
* @param {number} threshold A value between 0 and 255. Pixels with a brightness above this threshold will become white, and those below will become black. Defaults to 128.
* @returns {HTMLCanvasElement} A canvas element with the black and white stencil drawing.
*/
function processImage(originalImg, threshold = 128) {
// Create a new canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the image
canvas.width = originalImg.naturalWidth;
canvas.height = originalImg.naturalHeight;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// Get the image data from the canvas
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Ensure threshold is within the valid 0-255 range
const cleanThreshold = Math.max(0, Math.min(255, Number(threshold)));
// Iterate over each pixel (4 values at a time: R, G, B, A)
for (let i = 0; i < data.length; i += 4) {
// Calculate the brightness of the pixel using the luminance formula
const brightness = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
// Determine if the pixel should be black or white based on the threshold
const color = brightness > cleanThreshold ? 255 : 0;
// Set the new RGB values
data[i] = color; // Red
data[i + 1] = color; // Green
data[i + 2] = color; // Blue
// Alpha (data[i + 3]) remains unchanged
}
// Put the modified image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
// Return the resulting canvas
return canvas;
}The Image To Black And White Stencil Converter allows users to transform color images into high-contrast black and white stencil images. By converting the image first to grayscale and applying a brightness threshold, the tool enables users to create designs suitable for printing, artistic applications, or graphic design projects. This converter is ideal for artists, designers, and anyone looking to create bold, simplified representations of their images.