You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, censorMethod = 'Blur and Warning', intensity = 25) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const lowerMethod = String(censorMethod).toLowerCase();
const effectIntensity = Math.max(1, Number(intensity) || 25);
// Apply the censoring effect (Pixelation or Blur)
if (lowerMethod.includes('pixel')) {
const pixelSize = effectIntensity;
const scaledW = Math.max(1, Math.ceil(canvas.width / pixelSize));
const scaledH = Math.max(1, Math.ceil(canvas.height / pixelSize));
const offCanvas = document.createElement('canvas');
offCanvas.width = scaledW;
offCanvas.height = scaledH;
const offCtx = offCanvas.getContext('2d');
offCtx.drawImage(originalImg, 0, 0, scaledW, scaledH);
ctx.imageSmoothingEnabled = false;
ctx.drawImage(offCanvas, 0, 0, scaledW, scaledH, 0, 0, canvas.width, canvas.height);
ctx.imageSmoothingEnabled = true; // reset
} else {
// Blur approach
ctx.save();
ctx.filter = `blur(${effectIntensity}px)`;
// Draw slightly larger to counteract edge transparency bleeding common in canvas blur filters
ctx.drawImage(
originalImg,
-effectIntensity * 2,
-effectIntensity * 2,
canvas.width + effectIntensity * 4,
canvas.height + effectIntensity * 4
);
ctx.restore();
}
// Apply a warning overlay if specified in the method
if (lowerMethod.includes('warning') || lowerMethod.includes('overlay')) {
// Apply dark translucent tint overlay
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const iconSize = Math.max(30, Math.min(canvas.width, canvas.height) * 0.15);
const fontSize = Math.max(14, iconSize * 0.4);
// Setup shadow for better text visibility against any background
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
ctx.shadowBlur = 8;
// Draw 18+ Icon
ctx.font = `${iconSize}px Arial, sans-serif`;
ctx.fillText('🔞', canvas.width / 2, canvas.height / 2 - fontSize * 1.5);
// Draw Main Text
ctx.fillStyle = '#ffffff';
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
ctx.fillText('ADULT CONTENT', canvas.width / 2, canvas.height / 2 + iconSize * 0.1);
// Draw Secondary Text
ctx.font = `${fontSize * 0.6}px Arial, sans-serif`;
ctx.fillText('Sensitive material', canvas.width / 2, canvas.height / 2 + iconSize * 0.1 + fontSize + 8);
ctx.shadowBlur = 0; // reset
}
return canvas;
}
Apply Changes