function processImage(
originalImg,
buttonStyle = 'youtube',
buttonSizePct = 15,
buttonColor = '#FF0000',
buttonOpacity = 0.9,
dimBackground = 1,
showPlayerControls = 1,
currentTimeText = "0:00",
videoDurationText = "12:34"
) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Use natural dimensions of the image
canvas.width = originalImg.naturalWidth || originalImg.width;
canvas.height = originalImg.naturalHeight || originalImg.height;
// Draw the original image base
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// Dim the background to make the play button pop out more
if (Number(dimBackground) === 1) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.35)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// Validate inputs
const validSizePct = Math.min(100, Math.max(1, Number(buttonSizePct) || 15));
const validOpacity = Math.min(1, Math.max(0, Number(buttonOpacity) || 0.9));
const scale = canvas.width * (validSizePct / 100);
// Draw the Play Button
ctx.globalAlpha = validOpacity;
if (buttonStyle.toLowerCase() === 'circle') {
const r = scale * 0.5;
ctx.fillStyle = buttonColor;
ctx.beginPath();
ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
ctx.fill();
ctx.globalAlpha = 1.0;
// Triangle Icon
ctx.fillStyle = '#FFFFFF';
ctx.beginPath();
const triW = r * 0.7;
const triH = r * 0.75;
const triX = centerX - triW * 0.3;
ctx.moveTo(triX, centerY - triH / 2);
ctx.lineTo(triX + triW, centerY);
ctx.lineTo(triX, centerY + triH / 2);
ctx.closePath();
ctx.fill();
} else if (buttonStyle.toLowerCase() === 'minimal') {
// Minimal style: just an outlined triangle or a solid colored triangle with dropshadow
ctx.globalAlpha = validOpacity;
ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
ctx.shadowBlur = scale * 0.2;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = scale * 0.05;
ctx.fillStyle = buttonColor;
ctx.beginPath();
const triW = scale * 0.8;
const triH = scale * 0.9;
const triX = centerX - triW * 0.35;
ctx.moveTo(triX, centerY - triH / 2);
ctx.lineTo(triX + triW, centerY);
ctx.lineTo(triX, centerY + triH / 2);
ctx.closePath();
ctx.fill();
// Reset shadow
ctx.shadowColor = "transparent";
} else {
// Default to 'youtube' styled rounded rectangle
const w = scale;
const h = scale * 0.7;
const radius = scale * 0.15;
const x = centerX - w / 2;
const y = centerY - h / 2;
// Button Background
ctx.fillStyle = buttonColor;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + w - radius, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
ctx.lineTo(x + w, y + h - radius);
ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
ctx.lineTo(x + radius, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1.0;
// Triangle Icon
ctx.fillStyle = '#FFFFFF';
ctx.beginPath();
const triW = w * 0.3;
const triH = h * 0.45;
const triX = centerX - triW * 0.35;
ctx.moveTo(triX, centerY - triH / 2);
ctx.lineTo(triX + triW, centerY);
ctx.lineTo(triX, centerY + triH / 2);
ctx.closePath();
ctx.fill();
}
ctx.globalAlpha = 1.0;
// Draw Bottom Player Controls
if (Number(showPlayerControls) === 1) {
const barHeight = Math.max(30, canvas.height * 0.1);
const bottomY = canvas.height;
// Dark gradient at the bottom for controls readability
const grad = ctx.createLinearGradient(0, bottomY - barHeight * 1.5, 0, bottomY);
grad.addColorStop(0, 'rgba(0,0,0,0)');
grad.addColorStop(0.5, 'rgba(0,0,0,0.5)');
grad.addColorStop(1, 'rgba(0,0,0,0.85)');
ctx.fillStyle = grad;
ctx.fillRect(0, bottomY - barHeight * 1.5, canvas.width, barHeight * 1.5);
// Prepare typography
const fontSize = Math.max(12, canvas.height * 0.035);
ctx.font = `${fontSize}px Arial, sans-serif`;
ctx.fillStyle = '#FFFFFF';
ctx.textBaseline = 'middle';
const timeText = `${currentTimeText} / ${videoDurationText}`;
const textWidth = ctx.measureText(timeText).width;
// Draw tiny play/paused icon at bottom left
const iconSize = fontSize * 0.9;
const padding = canvas.width * 0.03;
ctx.fillStyle = '#FFFFFF';
ctx.beginPath();
ctx.moveTo(padding, bottomY - barHeight / 2 - iconSize / 2);
ctx.lineTo(padding + iconSize * 0.8, bottomY - barHeight / 2);
ctx.lineTo(padding, bottomY - barHeight / 2 + iconSize / 2);
ctx.closePath();
ctx.fill();
// Draw Timestamp Text
const textX = padding + iconSize * 1.5;
ctx.fillText(timeText, textX, bottomY - barHeight / 2);
// Draw Progress Track Line
const lineHeight = Math.max(2, canvas.height * 0.008);
const lineX = textX + textWidth + padding;
const progressWidth = canvas.width - lineX - padding;
const lineY = bottomY - barHeight / 2 - lineHeight / 2;
// Inactive Base line
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(lineX, lineY, progressWidth, lineHeight);
// Simulated Filled progress
const readProgressRatio = 0.15; // Represents viewing progress visually
ctx.fillStyle = buttonColor;
ctx.fillRect(lineX, lineY, progressWidth * readProgressRatio, lineHeight);
// Player Head Knob
ctx.fillStyle = '#FFFFFF';
ctx.beginPath();
ctx.arc(lineX + progressWidth * readProgressRatio, lineY + lineHeight / 2, lineHeight * 2.5, 0, 2 * Math.PI);
ctx.fill();
}
return canvas;
}This tool allows you to transform a static image into a visual representation of a video player. It overlays customizable play buttons—with styles such as YouTube-inspired, circular, or minimal—and simulated player controls, including timestamps and progress bars, onto your image. This is particularly useful for web designers and content creators who want to create realistic video thumbnails or placeholder graphics that signal video content to users on a website.