You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, framePadding = "80", foxScale = "40", flowerCount = "40") {
// Parse to ensure valid numeric values
const P_val = isNaN(parseInt(framePadding, 10)) ? 80 : parseInt(framePadding, 10);
const FS_val = isNaN(parseInt(foxScale, 10)) ? 40 : parseInt(foxScale, 10);
const FC_val = isNaN(parseInt(flowerCount, 10)) ? 40 : parseInt(flowerCount, 10);
// Dynamic scale so the effect remains proportional to image sizes
const maxDim = Math.max(originalImg.width, originalImg.height);
const scale = Math.max(0.5, maxDim / 800);
const P = P_val * scale;
const FS = FS_val * scale;
const FC = FC_val; // Count should naturally not scale with size, just area density
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = originalImg.width + P * 2;
canvas.height = originalImg.height + P * 2;
// 1. Draw solid background
ctx.fillStyle = "#EBF7E3"; // Soft green
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. Magical dust / pollen dots in the air
ctx.fillStyle = "#FFFFFF";
ctx.globalAlpha = 0.6;
for(let i = 0; i < 60; i++) {
ctx.beginPath();
const r = Math.random() * 2.5 * scale;
ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, r, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1.0;
// 3. Decorative Greenery (Leaves)
ctx.fillStyle = "#8CC672";
const leafStep = 35 * scale;
// Top border leaves
for(let i = 0; i < canvas.width; i += leafStep) {
ctx.beginPath();
const rx = i + (Math.random() * 20 - 10) * scale;
const ry = P * 0.15 + (Math.random() * 15) * scale;
ctx.ellipse(rx, ry, (8 + Math.random() * 4) * scale, (16 + Math.random() * 8) * scale, Math.random() * Math.PI, 0, Math.PI * 2);
ctx.fill();
}
// Left border leaves
for(let j = 0; j < canvas.height; j += leafStep) {
ctx.beginPath();
const rx = P * 0.15 + (Math.random() * 15) * scale;
const ry = j + (Math.random() * 20 - 10) * scale;
ctx.ellipse(rx, ry, (8 + Math.random() * 4) * scale, (16 + Math.random() * 8) * scale, Math.random() * Math.PI, 0, Math.PI * 2);
ctx.fill();
}
// Right border leaves
for(let j = 0; j < canvas.height; j += leafStep) {
ctx.beginPath();
const rx = canvas.width - P * 0.15 - (Math.random() * 15) * scale;
const ry = j + (Math.random() * 20 - 10) * scale;
ctx.ellipse(rx, ry, (8 + Math.random() * 4) * scale, (16 + Math.random() * 8) * scale, Math.random() * Math.PI, 0, Math.PI * 2);
ctx.fill();
}
// 4. Grass at the bottom border area
ctx.fillStyle = "#A8D592";
const grassStep = 15 * scale;
for(let i = 0; i < canvas.width; i += grassStep) {
ctx.beginPath();
ctx.moveTo(i, canvas.height);
const gh = P * 0.3 + Math.random() * P * 0.4; // variable grass height
ctx.lineTo(i + (grassStep / 2), canvas.height - gh);
ctx.lineTo(i + grassStep * 1.1, canvas.height);
ctx.fill();
}
// 5. Flowers randomly scattered along the borders
const drawFlower = (x, y, s, petals) => {
const colors = ["#FF9AA2", "#FFB7B2", "#FFDAC1", "#E2F0CB", "#B5EAD7", "#C7CEEA", "#F1CBFF"];
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
for(let i = 0; i < petals; i++) {
const angle = i * (Math.PI * 2 / petals);
ctx.beginPath();
ctx.ellipse(
x + Math.cos(angle) * s * 0.6,
y + Math.sin(angle) * s * 0.6,
s * 0.6,
s * 0.4,
angle,
0,
Math.PI * 2
);
ctx.fill();
}
// Flower center
ctx.fillStyle = "#FFDF00";
ctx.beginPath();
ctx.arc(x, y, s * 0.3, 0, Math.PI * 2);
ctx.fill();
};
for(let i = 0; i < FC; i++) {
const edge = Math.floor(Math.random() * 4);
let fx, fy;
if (edge === 0) { // Top
fx = Math.random() * canvas.width;
fy = Math.random() * P * 0.7;
} else if (edge === 1) { // Bottom
fx = Math.random() * canvas.width;
fy = canvas.height - Math.random() * P * 0.8;
} else if (edge === 2) { // Left
fx = Math.random() * P * 0.7;
fy = Math.random() * canvas.height;
} else { // Right
fx = canvas.width - Math.random() * P * 0.7;
fy = Math.random() * canvas.height;
}
const fSize = (10 + Math.random() * 10) * scale;
const fPetals = 4 + Math.floor(Math.random() * 4);
drawFlower(fx, fy, fSize, fPetals);
}
// 6. Draw White Polaroid-style frame under original image
const frameOff = 12 * scale;
ctx.shadowColor = "rgba(0, 0, 0, 0.15)";
ctx.shadowBlur = 15 * scale;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 6 * scale;
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(P - frameOff, P - frameOff, originalImg.width + frameOff * 2, originalImg.height + frameOff * 2);
// Draw original image
ctx.shadowColor = "transparent";
ctx.drawImage(originalImg, P, P);
// 7. Draw the Little Fox illustration
const drawFox = (x, y, s) => {
ctx.save();
ctx.translate(x, y);
// Outer Ears
ctx.fillStyle = "#E0662A"; // Fox orange primary
ctx.beginPath();
ctx.moveTo(-s * 0.5, 0);
ctx.lineTo(-s * 1.3, -s * 1.8);
ctx.lineTo(0, -s * 0.5);
ctx.fill();
ctx.beginPath();
ctx.moveTo(s * 0.5, 0);
ctx.lineTo(s * 1.3, -s * 1.8);
ctx.lineTo(0, -s * 0.5);
ctx.fill();
// Inner Ears
ctx.fillStyle = "#FAD6C4"; // Peach
ctx.beginPath();
ctx.moveTo(-s * 0.6, -s * 0.5);
ctx.lineTo(-s * 1.1, -s * 1.5);
ctx.lineTo(-s * 0.2, -s * 0.8);
ctx.fill();
ctx.beginPath();
ctx.moveTo(s * 0.6, -s * 0.5);
ctx.lineTo(s * 1.1, -s * 1.5);
ctx.lineTo(s * 0.2, -s * 0.8);
ctx.fill();
// Head Main Shape
ctx.fillStyle = "#E0662A";
ctx.beginPath();
ctx.arc(0, 0, s, Math.PI, 0, false);
ctx.lineTo(0, s * 1.5);
ctx.lineTo(-s, 0);
ctx.closePath();
ctx.fill();
// Exaggerated White Cheeks
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.moveTo(0, s * 0.9);
ctx.quadraticCurveTo(-s * 0.8, s * 0.9, -s * 0.9, 0);
ctx.quadraticCurveTo(-s * 0.9, s * 0.9, 0, s * 1.4);
ctx.fill();
ctx.beginPath();
ctx.moveTo(0, s * 0.9);
ctx.quadraticCurveTo(s * 0.8, s * 0.9, s * 0.9, 0);
ctx.quadraticCurveTo(s * 0.9, s * 0.9, 0, s * 1.4);
ctx.fill();
// Nose & Eyes
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(0, s * 1.4, s * 0.15, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(-s * 0.4, s * 0.4, s * 0.12, 0, Math.PI * 2);
ctx.arc(s * 0.4, s * 0.4, s * 0.12, 0, Math.PI * 2);
ctx.fill();
// Shiny Highlights
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(-s * 0.4 + s * 0.04, s * 0.4 - s * 0.04, s * 0.04, 0, Math.PI * 2);
ctx.arc(s * 0.4 + s * 0.04, s * 0.4 - s * 0.04, s * 0.04, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(s * 0.04, s * 1.4 - s * 0.04, s * 0.04, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
};
// 8. Place fox tucking into the bottom-right frame area
const foxPosX = P + originalImg.width - frameOff * 0.2;
const foxPosY = P + originalImg.height + frameOff * 2 - FS;
drawFox(foxPosX, foxPosY, FS);
return canvas;
}Apply Changes
