You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
title = 'WANTED',
rewardText = 'REWARD',
amountText = '$500,000',
footerText = 'DEAD OR ALIVE',
vintageFilter = 1
) {
// Standard canvas dimensions for a wanted poster
const width = 800;
const height = 1000;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 1. Draw vintage parchment background
const cx = width / 2;
const cy = height / 2;
const gradient = ctx.createRadialGradient(cx, cy, 100, cx, cy, width);
gradient.addColorStop(0, '#FFF3D6'); // Lighter center
gradient.addColorStop(0.7, '#E4C792');
gradient.addColorStop(1, '#C79A54'); // Darker, scorched-looking edges
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
// 2. Draw poster border limits
const textColor = '#2c1e0f'; // Dark brownish-black for ink
ctx.strokeStyle = textColor;
// Outer thick border
ctx.lineWidth = 12;
ctx.strokeRect(35, 35, width - 70, height - 70);
// Inner thin border
ctx.lineWidth = 3;
ctx.strokeRect(55, 55, width - 110, height - 110);
// 3. Typography setup
ctx.fillStyle = textColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
const fontStack = '"Times New Roman", Times, serif';
// Top Title (WANTED)
ctx.font = `bold 130px ${fontStack}`;
ctx.fillText(title, width / 2, 70, width - 130);
// 4. Draw the original image with clipping and filter
const imgX = 120;
const imgY = 230;
const imgW = 560;
const imgH = 440;
// Calculate crop to cover the bounding box
const imgAspect = originalImg.width / originalImg.height;
const boxAspect = imgW / imgH;
let sWidth = originalImg.width;
let sHeight = originalImg.height;
let sx = 0, sy = 0;
if (imgAspect > boxAspect) {
sWidth = sHeight * boxAspect;
sx = (originalImg.width - sWidth) / 2;
} else {
sHeight = sWidth / boxAspect;
sy = (originalImg.height - sHeight) / 2;
}
ctx.save();
// Apply vintage Sepia/Grayscale filter if requested
if (Number(vintageFilter) === 1) {
ctx.filter = 'sepia(0.75) contrast(1.3) grayscale(0.4) brightness(0.9)';
}
ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, imgX, imgY, imgW, imgH);
ctx.restore();
// 5. Draw a frame over the image
ctx.lineWidth = 6;
ctx.strokeRect(imgX, imgY, imgW, imgH);
// Inner frame detail
ctx.lineWidth = 2;
ctx.strokeRect(imgX - 8, imgY - 8, imgW + 16, imgH + 16);
// 6. Draw Bottom Texts
// Reward Label
ctx.font = `bold 65px ${fontStack}`;
ctx.fillText(rewardText, width / 2, 700, width - 130);
// Amount Text
ctx.font = `bold 100px ${fontStack}`;
ctx.fillText(amountText, width / 2, 770, width - 130);
// Footer Text
ctx.font = `bold 45px ${fontStack}`;
// Add small decorative stars around footer
ctx.fillText(`★ ${footerText} ★`, width / 2, 890, width - 130);
return canvas;
}
Apply Changes