Loading...
Generate random bitmap images with customizable size and patterns
Random bitmap generator creates images with random pixel data. Generate noise patterns, random colors, static effects, or controlled randomness for testing, art, cryptography visualization, or placeholder images.
Create canvas of specified dimensions, iterate through each pixel position, generate random RGB(A) values for each pixel using Math.random() or cryptographic random, write to ImageData, render to canvas.
Bitmap: width × height × 4 bytes (RGBA). Random sources: Math.random() (pseudo-random, not cryptographic), crypto.getRandomValues() (cryptographic). Patterns: pure noise, gaussian, perlin noise, seeded random for reproducibility.
Generate test images of specific sizes.
1920x1080 random image for load testingCreate noise textures and glitch effects.
Unique placeholder images for development.
Visualize random data as images.
// Basic random bitmap
function generateRandomBitmap(width, height, options = {}) {
const { grayscale = false, alpha = false, seed = null } = options;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(width, height);
const data = imageData.data;
// Optional: seeded random
const random = seed ? seededRandom(seed) : Math.random;
for (let i = 0; i < data.length; i += 4) {
if (grayscale) {
const value = Math.floor(random() * 256);
data[i] = value; // R
data[i + 1] = value; // G
data[i + 2] = value; // B
} else {
data[i] = Math.floor(random() * 256); // R
data[i + 1] = Math.floor(random() * 256); // G
data[i + 2] = Math.floor(random() * 256); // B
}
data[i + 3] = alpha ? Math.floor(random() * 256) : 255; // A
}
ctx.putImageData(imageData, 0, 0);
return canvas;
}
// Cryptographic random
function generateSecureRandomBitmap(width, height) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(width, height);
// Use crypto for secure random
crypto.getRandomValues(imageData.data);
// Ensure alpha is 255 (opaque)
for (let i = 3; i < imageData.data.length; i += 4) {
imageData.data[i] = 255;
}
ctx.putImageData(imageData, 0, 0);
return canvas;
}
// Download as PNG
function downloadBitmap(canvas, filename = 'random.png') {
const link = document.createElement('a');
link.download = filename;
link.href = canvas.toDataURL('image/png');
link.click();
}
// Generate 256x256 random bitmap
const bitmap = generateRandomBitmap(256, 256, { grayscale: true });
downloadBitmap(bitmap, 'noise.png');Generates random bitmaps with options for grayscale, alpha, and seeded randomness.
Use random bitmap generator for test images, noise textures, placeholder images, or visualizing random data.
Math.random() is pseudo-random, fast but predictable. crypto.getRandomValues() is cryptographically secure but slower. For visual purposes, Math.random() is fine.