function processImage(originalImg, mode = "threshold", threshold = 128) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Match canvas dimensions to the original image
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// Draw original image onto canvas
ctx.drawImage(originalImg, 0, 0);
// Fetch image data to manipulate pixels
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const thresh = Number(threshold);
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const a = data[i + 3];
// Skip fully transparent pixels
if (a === 0) continue;
if (mode === "silhouette") {
// Silhouette mode: Change all visible pixels to black, preserving alpha transparency
data[i] = 0; // R
data[i + 1] = 0; // G
data[i + 2] = 0; // B
} else if (mode === "grayscale") {
// Grayscale mode: Convert colors to shades of black, white, and gray
const gray = 0.299 * r + 0.587 * g + 0.114 * b;
data[i] = gray;
data[i + 1] = gray;
data[i + 2] = gray;
} else {
// Default Threshold mode: Strict Black & White reduction based on luminosity
const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
const value = luminance < thresh ? 0 : 255;
data[i] = value;
data[i + 1] = value;
data[i + 2] = value;
// Solidify edges by snapping partial transparency to either opaque or transparent
data[i + 3] = a < 128 ? 0 : 255;
}
}
// Apply the manipulated data back to the canvas
ctx.putImageData(imageData, 0, 0);
return canvas;
}The Image To Black Color Converter allows users to transform color images into monochromatic formats using different processing modes. Users can convert images into solid black silhouettes, transform them into grayscale, or apply a thresholding effect to create high-contrast black and white images. This tool is useful for graphic designers creating icons, artists working with stencil patterns, or anyone needing to simplify images for printing and technical illustrations.