You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, songTitle = "Audio Track Record", artistName = "Android Telephone MP3", themeColor = "#1DB954") {
const canvas = document.createElement('canvas');
const width = 400;
const height = 800;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 1. Solid dark background fallback
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, width, height);
// 2. Blurred Background using the Original Image (Album Art)
ctx.save();
ctx.globalAlpha = 0.5;
ctx.filter = 'blur(40px)';
const bgScale = Math.max(width / originalImg.width, height / originalImg.height);
const bgW = originalImg.width * bgScale;
const bgH = originalImg.height * bgScale;
ctx.drawImage(originalImg, (width - bgW) / 2, (height - bgH) / 2, bgW, bgH);
ctx.restore();
// 3. Semi-transparent overlay to ensure contrast for UI elements
ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
ctx.fillRect(0, 0, width, height);
// Helper: Round Rectangle
function roundRect(ctx, x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
}
// Top device status bar (Mock Phone Display)
ctx.fillStyle = '#ffffff';
ctx.font = '500 13px sans-serif';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('10:00', 20, 15);
// Battery icon mock
ctx.fillRect(width - 40, 15, 20, 10);
ctx.fillRect(width - 18, 18, 2, 4);
// Search Bar Area ("Search Topic Music File")
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
roundRect(ctx, 20, 50, width - 40, 40, 20);
ctx.fill();
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
ctx.font = '14px sans-serif';
ctx.textBaseline = 'middle';
ctx.fillText('🔍 Search Topic Music or Audio File...', 40, 70);
// Album Art Display (Center)
const albumSize = 320;
const albumX = (width - albumSize) / 2;
const albumY = 130;
// Album shadow
ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 20;
ctx.shadowOffsetY = 10;
roundRect(ctx, albumX, albumY, albumSize, albumSize, 15);
ctx.fill();
ctx.restore();
// Draw Album Image
ctx.save();
roundRect(ctx, albumX, albumY, albumSize, albumSize, 15);
ctx.clip();
const scale = Math.max(albumSize / originalImg.width, albumSize / originalImg.height);
const imgW = originalImg.width * scale;
const imgH = originalImg.height * scale;
const imgX = albumX + (albumSize - imgW) / 2;
const imgY = albumY + (albumSize - imgH) / 2;
ctx.drawImage(originalImg, imgX, imgY, imgW, imgH);
ctx.restore();
// Song Info (Title and Artist Name)
ctx.textBaseline = 'alphabetic'; // Reset baseline
ctx.fillStyle = '#ffffff';
ctx.textAlign = 'left';
ctx.font = 'bold 24px sans-serif';
// Truncate if text is too long
let titleStr = songTitle;
if (ctx.measureText(titleStr).width > width - 80) titleStr = titleStr.substring(0, 25) + '...';
ctx.fillText(titleStr, 30, albumY + albumSize + 55);
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
ctx.font = '18px sans-serif';
let artistStr = artistName;
if (ctx.measureText(artistStr).width > width - 80) artistStr = artistStr.substring(0, 30) + '...';
ctx.fillText(artistStr, 30, albumY + albumSize + 85);
// Like button (Heart icon mock)
ctx.fillStyle = themeColor;
ctx.font = '24px sans-serif';
ctx.fillText('❤', width - 50, albumY + albumSize + 55);
// Progress Bar (Track Record Line)
const progressY = albumY + albumSize + 140;
ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
roundRect(ctx, 30, progressY, width - 60, 4, 2);
ctx.fill();
const progressWidth = (width - 60) * 0.35; // Example: 35% played
ctx.fillStyle = themeColor;
roundRect(ctx, 30, progressY, progressWidth, 4, 2);
ctx.fill();
// Progress Dot Indicator
ctx.beginPath();
ctx.arc(30 + progressWidth, progressY + 2, 7, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
// Timestamp Texts
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
ctx.font = '12px sans-serif';
ctx.fillText('1:24', 30, progressY + 22);
ctx.textAlign = 'right';
ctx.fillText('4:02', width - 30, progressY + 22);
// Playback Controls (Mp3 Player Interface)
const controlY = progressY + 80;
const centerX = width / 2;
// Play/Pause Button Background
ctx.beginPath();
ctx.arc(centerX, controlY, 35, 0, Math.PI * 2);
ctx.fillStyle = themeColor;
ctx.fill();
// Play icon (Triangle)
ctx.fillStyle = '#000000'; // Dark for contrast against active themeColor
ctx.beginPath();
ctx.moveTo(centerX - 6, controlY - 12);
ctx.lineTo(centerX + 12, controlY);
ctx.lineTo(centerX - 6, controlY + 12);
ctx.closePath();
ctx.fill();
// Previous Button
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.moveTo(centerX - 70, controlY);
ctx.lineTo(centerX - 50, controlY - 12);
ctx.lineTo(centerX - 50, controlY + 12);
ctx.fill();
ctx.fillRect(centerX - 74, controlY - 12, 4, 24);
// Next Button
ctx.beginPath();
ctx.moveTo(centerX + 70, controlY);
ctx.lineTo(centerX + 50, controlY - 12);
ctx.lineTo(centerX + 50, controlY + 12);
ctx.fill();
ctx.fillRect(centerX + 70, controlY - 12, 4, 24);
// Shuffle Icon
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
ctx.font = '18px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('🔀', centerX - 140, controlY);
// Repeat Icon
ctx.fillText('🔁', centerX + 140, controlY);
return canvas;
}Apply Changes
