You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, text = "ЧИСТАЯ ПРАВДА", color = "rgba(220, 20, 60, 0.8)", angleDeg = -25) {
// Create canvas
const canvas = document.createElement('canvas');
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw the original image
ctx.drawImage(originalImg, 0, 0);
// Prepare stamp settings
const angleRad = (Number(angleDeg) * Math.PI) / 180;
// Scale font size based on image dimensions
const fontSize = Math.max(20, Math.min(width, height) / 10);
ctx.save();
// Move to the center of the canvas to draw the stamp
ctx.translate(width / 2, height / 2);
ctx.rotate(angleRad);
// Font setup (using a typewriter/stamp style font)
ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Measure text to determine border box dimensions
const textMetrics = ctx.measureText(text);
// Rough estimate for height if specific metrics aren't supported uniformly
const boxHeight = fontSize * 1.8;
const boxWidth = textMetrics.width + (fontSize * 1.5);
const cornerRadius = fontSize * 0.2;
// Apply color and line width
ctx.strokeStyle = color;
ctx.fillStyle = color;
ctx.lineWidth = Math.max(3, fontSize * 0.1);
// Coordinates for the outer box (centered at 0,0)
const x = -boxWidth / 2;
const y = -boxHeight / 2;
// Function to draw a rounded rectangle
function drawRoundedRect(ctx, rx, ry, rw, rh, r) {
ctx.beginPath();
ctx.moveTo(rx + r, ry);
ctx.lineTo(rx + rw - r, ry);
ctx.quadraticCurveTo(rx + rw, ry, rx + rw, ry + r);
ctx.lineTo(rx + rw, ry + rh - r);
ctx.quadraticCurveTo(rx + rw, ry + rh, rx + rw - r, ry + rh);
ctx.lineTo(rx + r, ry + rh);
ctx.quadraticCurveTo(rx, ry + rh, rx, ry + rh - r);
ctx.lineTo(rx, ry + r);
ctx.quadraticCurveTo(rx, ry, rx + r, ry);
ctx.closePath();
ctx.stroke();
}
// Draw Outer Boundary
drawRoundedRect(ctx, x, y, boxWidth, boxHeight, cornerRadius);
// Draw Inner Boundary (for realistic rubber stamp look)
const innerOffset = ctx.lineWidth * 1.5;
const innerLineWidth = ctx.lineWidth * 0.4;
const ix = x + innerOffset;
const iy = y + innerOffset;
const iw = boxWidth - (innerOffset * 2);
const ih = boxHeight - (innerOffset * 2);
// Ensure inner box is large enough to be drawn
if (iw > 0 && ih > 0) {
ctx.lineWidth = innerLineWidth;
drawRoundedRect(ctx, ix, iy, iw, ih, cornerRadius * 0.8);
}
// Draw Text
// Adjust y to center optically depending on baseline
ctx.fillText(text, 0, fontSize * 0.05);
ctx.restore();
return canvas;
}
Apply Changes