You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
virusName = "Trojan.Win32.Generic",
scanColor = "#ff0000",
message = "MALWARE DETECTED",
intensity = "0.3"
) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Parse intensity safely
let intensityVal = parseFloat(intensity);
if (isNaN(intensityVal)) {
intensityVal = 0.3;
}
// 1. Add "computer scanner" CRT scanlines effect
ctx.fillStyle = `rgba(0, 255, 0, ${intensityVal})`;
for (let y = 0; y < height; y += 4) {
ctx.fillRect(0, y, width, 2);
}
// 2. Add an overall red/warning tint over the image
ctx.fillStyle = `rgba(255, 0, 0, ${intensityVal * 0.4})`;
ctx.fillRect(0, 0, width, height);
// 3. Find a fake "target" area to act as the located computer virus.
// We use a pseudo-random offset based on the image size so the location is consistent
// for the same image but looks like a random target box.
const boxWidth = Math.min(width * 0.3, 300);
const boxHeight = boxWidth * 0.8;
const offsetX = (width * 7) % (width * 0.5) - (width * 0.25);
const offsetY = (height * 11) % (height * 0.5) - (height * 0.25);
const bX = (width - boxWidth) / 2 + offsetX;
const bY = (height - boxHeight) / 2 + offsetY;
// Clamp values to ensure bounding box stays inside the canvas
const sX = Math.max(0, Math.min(width - 1, bX));
const sY = Math.max(0, Math.min(height - 1, bY));
const sW = Math.max(1, Math.min(width - sX, boxWidth));
const sH = Math.max(1, Math.min(height - sY, boxHeight));
// 4. Glitch / Invert the target area colors to show "infection/data anomaly"
if (sW > 0 && sH > 0) {
const imgData = ctx.getImageData(sX, sY, sW, sH);
for(let i = 0; i < imgData.data.length; i += 4) {
// Invert colors for a glitch effect
imgData.data[i] = 255 - imgData.data[i]; // Red
imgData.data[i+1] = 255 - imgData.data[i+1]; // Green
imgData.data[i+2] = 255 - imgData.data[i+2]; // Blue
// Slightly boost red in the corrupted area
imgData.data[i] = Math.min(255, imgData.data[i] + 60);
}
ctx.putImageData(imgData, sX, sY);
}
// 5. Draw the cyber targeting box around the virus
ctx.strokeStyle = scanColor;
ctx.lineWidth = Math.max(2, width * 0.005);
const len = Math.max(10, boxWidth * 0.15);
ctx.beginPath();
// Top-left corner
ctx.moveTo(sX, sY + len); ctx.lineTo(sX, sY); ctx.lineTo(sX + len, sY);
// Top-right corner
ctx.moveTo(sX + sW - len, sY); ctx.lineTo(sX + sW, sY); ctx.lineTo(sX + sW, sY + len);
// Bottom-right corner
ctx.moveTo(sX + sW, sY + sH - len); ctx.lineTo(sX + sW, sY + sH); ctx.lineTo(sX + sW - len, sY + sH);
// Bottom-left corner
ctx.moveTo(sX + len, sY + sH); ctx.lineTo(sX, sY + sH); ctx.lineTo(sX, sY + sH - len);
ctx.stroke();
// Draw central crosshairs
const cX = sX + sW / 2;
const cY = sY + sH / 2;
const crossSize = len * 0.5;
ctx.beginPath();
ctx.moveTo(cX - crossSize, cY); ctx.lineTo(cX + crossSize, cY);
ctx.moveTo(cX, cY - crossSize); ctx.lineTo(cX, cY + crossSize);
ctx.stroke();
// 6. Add warning text HUD
ctx.fillStyle = scanColor;
// Size font relatively, keeping it within readable bounds
const fontSize = Math.max(14, Math.min(36, width * 0.03));
ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
ctx.textAlign = "left";
// Top label
ctx.textBaseline = "bottom";
ctx.fillText(`[${message}]`, sX, sY - 5);
// Bottom details
ctx.textBaseline = "top";
const detailSize = fontSize * 0.75;
ctx.font = `bold ${detailSize}px "Courier New", Courier, monospace`;
ctx.fillText(`Type: ${virusName}`, sX, sY + sH + 5);
ctx.fillText(`Status: ALERT / QUARANTINE REQ`, sX, sY + sH + 8 + detailSize);
return canvas;
}
Apply Changes