You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, searchText = "Печенье / Мультики / Лечебная грязь") {
const canvas = document.createElement('canvas');
const width = 800;
const height = 600;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = '#f8f9fa';
ctx.fillRect(0, 0, width, height);
// Header background
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, width, 80);
// Bottom border for header
ctx.strokeStyle = '#ebebeb';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 80);
ctx.lineTo(width, 80);
ctx.stroke();
// Fake logo
ctx.fillStyle = '#4285f4'; // Google blue-like hue
ctx.font = 'bold 24px Arial, sans-serif';
ctx.fillText("ImgSearch", 20, 50);
// Search input box coordinates and metrics
const bx = 150, by = 20, bw = 500, bh = 40, br = 20;
// Draw shadow for search box
ctx.save();
ctx.fillStyle = '#ffffff';
ctx.shadowColor = "rgba(0, 0, 0, 0.1)";
ctx.shadowBlur = 6;
ctx.shadowOffsetY = 2;
// Rounded rectangle path for search box
ctx.beginPath();
ctx.moveTo(bx + br, by);
ctx.lineTo(bx + bw - br, by);
ctx.quadraticCurveTo(bx + bw, by, bx + bw, by + br);
ctx.lineTo(bx + bw, by + bh - br);
ctx.quadraticCurveTo(bx + bw, by + bh, bx + bw - br, by + bh);
ctx.lineTo(bx + br, by + bh);
ctx.quadraticCurveTo(bx, by + bh, bx, by + bh - br);
ctx.lineTo(bx, by + br);
ctx.quadraticCurveTo(bx, by, bx + br, by);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.strokeStyle = '#dfe1e5';
ctx.lineWidth = 1;
ctx.stroke();
// The text inside the search bar
ctx.fillStyle = '#3c4043';
ctx.font = '16px Arial, sans-serif';
ctx.fillText(searchText, bx + 20, by + 26);
// Small preview of uploaded image inside search bar
const pSize = 28;
const srcMinPreview = Math.min(originalImg.width, originalImg.height);
const sxPreview = (originalImg.width - srcMinPreview) / 2;
const syPreview = (originalImg.height - srcMinPreview) / 2;
const previewX = bx + bw - pSize - 10;
const previewY = by + (bh - pSize) / 2;
ctx.drawImage(originalImg, sxPreview, syPreview, srcMinPreview, srcMinPreview, previewX, previewY, pSize, pSize);
ctx.strokeStyle = '#cccccc';
ctx.strokeRect(previewX, previewY, pSize, pSize);
// Result summary text
ctx.fillStyle = '#70757a';
ctx.font = '14px Arial, sans-serif';
ctx.fillText(`Image search results for: ${searchText}`, 20, 120);
// Helper function to draw a filtered result based on the theme
function drawResult(x, y, size, title, effect) {
// Crop original image to a square
const srcMin = Math.min(originalImg.width, originalImg.height);
const sx = (originalImg.width - srcMin) / 2;
const sy = (originalImg.height - srcMin) / 2;
ctx.save();
ctx.drawImage(originalImg, sx, sy, srcMin, srcMin, x, y, size, size);
const imgData = ctx.getImageData(x, y, size, size);
const data = imgData.data;
if (effect === 'cookie') {
// Apply Sepia Tone
for (let i = 0; i < data.length; i += 4) {
let r = data[i], g = data[i+1], b = data[i+2];
data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189)); // R
data[i+1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168)); // G
data[i+2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131)); // B
}
ctx.putImageData(imgData, x, y);
// Add scattered chocolate chips
ctx.fillStyle = '#3e2723';
for (let i = 0; i < 20; i++) {
ctx.beginPath();
let cx = x + 15 + Math.random() * (size - 30);
let cy = y + 15 + Math.random() * (size - 30);
ctx.arc(cx, cy, 3 + Math.random() * 6, 0, Math.PI * 2);
ctx.fill();
}
}
else if (effect === 'cartoon') {
// Apply Posterize Effect
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.floor(data[i] / 64) * 64 + 32;
data[i+1] = Math.floor(data[i+1] / 64) * 64 + 32;
data[i+2] = Math.floor(data[i+2] / 64) * 64 + 32;
}
ctx.putImageData(imgData, x, y);
// Add a thick comic-book style border outline
ctx.strokeStyle = '#000000';
ctx.lineWidth = 6;
ctx.strokeRect(x, y, size, size);
}
else if (effect === 'mud') {
// Apply Dark Muddy Tint
for (let i = 0; i < data.length; i += 4) {
let avg = (data[i] + data[i+1] + data[i+2]) / 3;
data[i] = avg * 0.6; // muddy red
data[i+1] = avg * 0.45; // muddy green
data[i+2] = avg * 0.3; // muddy blue
}
ctx.putImageData(imgData, x, y);
// Add opaque mud splats
ctx.fillStyle = '#4e342e'; // Dark brown
for (let i = 0; i < 25; i++) {
ctx.beginPath();
if (ctx.ellipse) {
ctx.ellipse(
x + Math.random() * size,
y + Math.random() * size,
Math.random() * 20 + 8,
Math.random() * 12 + 4,
Math.random() * Math.PI,
0, 2 * Math.PI
);
} else {
// Fallback using standard arcs if ellipse is unavailable
ctx.arc(x + Math.random() * size, y + Math.random() * size, 10 + Math.random() * 10, 0, Math.PI * 2);
}
ctx.fill();
}
}
ctx.restore();
// Draw Fake SEO Titles for the images
ctx.fillStyle = '#1a0dab'; // Generic link color
ctx.font = '18px Arial, sans-serif';
ctx.fillText(title, x, y + size + 28);
// Draw Fake URL
ctx.fillStyle = '#006621'; // Green URL color
ctx.font = '14px Arial, sans-serif';
ctx.fillText(`www.${effect}search.com › images`, x, y + size + 48);
// Draw simple description underneath
ctx.fillStyle = '#4d5156';
ctx.font = '13px Arial, sans-serif';
ctx.fillText(`Top match relating to "${title}"...`, x, y + size + 66);
}
const thumbSize = 230;
const gap = (width - 40 - (3 * thumbSize)) / 2; // 20px padding left/right -> distributed gaps
// Draw the 3 distinct thematic panels side-by-side
drawResult(20, 160, thumbSize, "Печенье (Cookies)", 'cookie');
drawResult(20 + thumbSize + gap, 160, thumbSize, "Мультики (Cartoons)", 'cartoon');
drawResult(20 + 2 * (thumbSize + gap), 160, thumbSize, "Лечебная грязь (Mud)", 'mud');
return canvas;
}Apply Changes
