You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
videoPlatform = "YouTube",
movieName = "HIFI Video Title",
languageDub = "English Dub",
translator = "Unknown Translator",
overlayText = "DOWNLOAD TEXT BY DVDRip",
applyVHSEffect = 1
) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// Set canvas size to match the original image
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
// Draw base image
ctx.drawImage(originalImg, 0, 0, width, height);
// Apply Retro VHS / DVDRip Visual Effect
if (Number(applyVHSEffect) === 1) {
// Chromatic aberration (Red channel shift)
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
const shift = Math.floor(width * 0.006) * 4; // Shift red channel to the left
const shiftedData = new Uint8ClampedArray(data);
for (let i = 0; i < data.length; i += 4) {
if (i + shift < data.length) {
shiftedData[i] = data[i + shift];
}
}
for (let i = 0; i < data.length; i++) {
data[i] = shiftedData[i];
}
ctx.putImageData(imageData, 0, 0);
// Scanlines
ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
for (let y = 0; y < height; y += 4) {
ctx.fillRect(0, y, width, 2);
}
// Random white tracking glitches
ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
for (let i = 0; i < 6; i++) {
const glitchY = Math.random() * height;
const glitchHeight = Math.random() * 5 + 1;
ctx.fillRect(0, glitchY, width, glitchHeight);
}
}
// Render Metadata Overlays
const fontSize = Math.max(14, Math.floor(height * 0.035));
ctx.font = `bold ${fontSize}px monospace`;
ctx.textBaseline = "top";
// Text styling for classic VCR timestamp/metadata
ctx.fillStyle = "#00FF00";
ctx.shadowColor = "rgba(0, 0, 0, 0.9)";
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
const margin = Math.max(10, Math.floor(width * 0.02));
// Top Left: Platform & State
ctx.textAlign = "left";
ctx.fillText("PLAY ►", margin, margin);
ctx.fillText(`PLATFORM: ${videoPlatform}`, margin, margin + fontSize * 1.5);
// Top Right: Rip Format
ctx.textAlign = "right";
ctx.fillText("HIFI VHSRip", width - margin, margin);
ctx.fillStyle = "#FFFFFF";
ctx.fillText("SP 00:00:24", width - margin, margin + fontSize * 1.5);
// Bottom Left: Movie Info
ctx.textAlign = "left";
ctx.fillStyle = "#00FF00";
ctx.textBaseline = "bottom";
ctx.fillText(`TITLE: ${movieName}`, margin, height - margin - fontSize * 3.5);
ctx.fillText(`DUB: ${languageDub}`, margin, height - margin - fontSize * 2);
ctx.fillText(`TRANS: ${translator}`, margin, height - margin - fontSize * 0.5);
// Bottom Right: Download Text
ctx.textAlign = "right";
ctx.fillStyle = "#FFFF00"; // Yellow text for highlights
// Word wrap download text if it's too long
const maxTextWidth = width / 2;
if (ctx.measureText(overlayText).width > maxTextWidth) {
ctx.fillText("DOWNLOAD BY", width - margin, height - margin - fontSize * 2);
ctx.fillText("DVDRip", width - margin, height - margin - fontSize * 0.5);
} else {
ctx.fillText(overlayText, width - margin, height - margin - fontSize * 0.5);
}
// Return the generated canvas
return canvas;
}
Apply Changes