← Back to Projects
Security Tool

Photo Background Maker

Web app tạo nền đẹp cho ảnh trước khi chia sẻ lên mạng xã hội. 6 loại nền RGB, watermark tùy chỉnh, export đa kích thước. 100% client-side processing.

2024-12•Live Demo →
DesignImage ProcessingCanvas APICloudflare WorkersFree Tool

Overview

Web application miễn phí giúp tạo background đẹp mắt cho ảnh với 6 loại nền RGB (Solid, Gradient, Linear, Radial, Glassmorphism, Frosted). Tự động bo góc, thêm watermark, và export đa kích thước cho Instagram, Facebook, Twitter, YouTube. Chạy 100% trên browser, không cần server, bảo mật tuyệt đối.

Key Features

6 Loại Nền RGB

Đa dạng style để phù hợp với mọi nhu cầu:

  1. Solid Color: Màu đơn sắc, clean và professional
  2. Gradient: Chuyển màu mượt mà giữa 2 màu
  3. Linear Gradient: Gradient theo hướng tùy chỉnh
  4. Radial Gradient: Gradient tỏa tròn từ tâm
  5. Glassmorphism: Hiệu ứng kính mờ hiện đại
  6. Frosted Background: Nền mờ ảo với blur effect
// Ví dụ tạo Glassmorphism background
const createGlassmorphism = (canvas, color1, color2) => {
  const ctx = canvas.getContext('2d');
  
  // Create gradient base
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  gradient.addColorStop(0, color1);
  gradient.addColorStop(1, color2);
  
  // Apply glass effect
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.filter = 'blur(20px) brightness(1.2)';
};

Upload & Preview Real-time

Trải nghiệm người dùng mượt mà:

  • Drag & Drop: Kéo thả ảnh vào browser
  • File Picker: Hoặc click để chọn file
  • Real-time Preview: Xem kết quả ngay lập tức
  • Responsive: Hoạt động tốt trên mobile và desktop

Bo Góc Tùy Chỉnh

Điều chỉnh border radius từ 0-50px:

const applyRoundedCorners = (image, radius) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // Create rounded rectangle path
  ctx.beginPath();
  ctx.roundRect(0, 0, canvas.width, canvas.height, radius);
  ctx.clip();
  
  // Draw image with rounded corners
  ctx.drawImage(image, 0, 0);
};

Watermark Linh Hoạt

Thêm watermark text hoặc ảnh:

  • 5 vị trí: Top-left, Top-right, Center, Bottom-left, Bottom-right
  • Opacity điều chỉnh: 0-100%
  • Size tùy chỉnh: Small, Medium, Large
  • Text watermark: Font, color, shadow
  • Image watermark: Upload logo riêng
const addWatermark = (canvas, text, position, opacity) => {
  const ctx = canvas.getContext('2d');
  ctx.globalAlpha = opacity;
  ctx.font = '24px Arial';
  ctx.fillStyle = 'white';
  ctx.shadowColor = 'black';
  ctx.shadowBlur = 4;
  
  const positions = {
    'bottom-right': [canvas.width - 150, canvas.height - 30],
    'bottom-left': [30, canvas.height - 30],
    'top-right': [canvas.width - 150, 50],
    'top-left': [30, 50],
    'center': [canvas.width/2 - 75, canvas.height/2]
  };
  
  ctx.fillText(text, ...positions[position]);
};

Export Đa Kích Thước

Tối ưu cho từng nền tảng:

PlatformSizeAspect Ratio
Instagram Post1080x10801:1
Instagram Story1080x19209:16
Facebook Post1200x6301.91:1
Twitter Post1024x5122:1
YouTube Thumbnail1280x72016:9
CustomAny sizeCustom
const exportSizes = {
  instagram: { width: 1080, height: 1080 },
  story: { width: 1080, height: 1920 },
  facebook: { width: 1200, height: 630 },
  twitter: { width: 1024, height: 512 },
  youtube: { width: 1280, height: 720 }
};

const exportImage = (canvas, platform) => {
  const size = exportSizes[platform];
  const resized = resizeCanvas(canvas, size.width, size.height);
  return resized.toDataURL('image/png');
};

Architecture

100% Client-Side Processing

Tất cả xử lý diễn ra trên browser:

┌──────────────┐
│   Browser    │
│              │
│  ┌────────┐  │
│  │ Upload │  │
│  └───┬────┘  │
│      │       │
│  ┌───▼────┐  │
│  │ Canvas │  │
│  │  API   │  │
│  └───┬────┘  │
│      │       │
│  ┌───▼────┐  │
│  │ Export │  │
│  └────────┘  │
│              │
└──────────────┘

Lợi ích:

  • ✅ Bảo mật tuyệt đối (ảnh không upload lên server)
  • ✅ Tốc độ nhanh (không cần network)
  • ✅ Hoạt động offline
  • ✅ Không giới hạn số lượng ảnh

Cloudflare Workers Deployment

Deploy trên Cloudflare Workers để có:

  • Global CDN: Tốc độ nhanh trên toàn cầu
  • Zero cold start: Luôn sẵn sàng
  • Free tier: 100,000 requests/day miễn phí
  • HTTPS: Bảo mật mặc định
// wrangler.toml
name = "photo-background-maker"
compatibility_date = "2024-11-22"
pages_build_output_dir = "./dist"

Use Cases

Content Creators

Tạo ảnh đẹp cho social media:

  • Instagram posts với nền gradient
  • Story với glassmorphism effect
  • YouTube thumbnails với watermark
  • Facebook cover photos

Designers

Quick mockups và presentations:

  • Product showcase với nền đẹp
  • Portfolio images với branding
  • Client presentations
  • Social media templates

Marketers

Marketing materials nhanh chóng:

  • Promotional graphics
  • Event announcements
  • Quote cards
  • Brand assets

Performance

Optimization Techniques

// Lazy load images
const lazyLoadImage = (src) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.src = src;
  });
};

// Canvas pooling for better performance
const canvasPool = [];
const getCanvas = () => {
  return canvasPool.pop() || document.createElement('canvas');
};

// Web Workers for heavy processing
const worker = new Worker('image-processor.js');
worker.postMessage({ image: imageData, effect: 'blur' });

Benchmarks

  • Upload to preview: < 100ms
  • Apply effect: < 200ms
  • Export image: < 500ms
  • Memory usage: < 50MB

Tech Stack

  • Frontend: Vanilla JavaScript (no framework overhead)
  • Canvas API: HTML5 Canvas cho image processing
  • Deployment: Cloudflare Workers
  • Build: Vite cho fast development
  • Styling: Tailwind CSS

User Experience

Intuitive Interface

┌─────────────────────────────────┐
│  Photo Background Maker  🎨     │
├─────────────────────────────────┤
│                                 │
│  [Drag & Drop or Click]         │
│                                 │
├─────────────────────────────────┤
│  Background Type: [Gradient ▼]  │
│  Color 1: [🎨]  Color 2: [🎨]   │
│  Border Radius: [●────────] 20px│
│                                 │
│  Watermark: [Text ▼]            │
│  Position: [Bottom-right ▼]     │
│  Opacity: [●────────] 50%       │
│                                 │
│  Export Size: [Instagram ▼]     │
│                                 │
│  [Download Image]               │
└─────────────────────────────────┘

Mobile Responsive

Hoạt động tốt trên mọi thiết bị:

  • Touch-friendly controls
  • Responsive layout
  • Mobile-optimized file picker
  • Pinch to zoom preview

Impact

Statistics

  • 🎨 6 background types để lựa chọn
  • 📱 5+ export sizes cho social media
  • 🔒 100% client-side processing
  • 🚀 < 500ms export time
  • 💰 Hoàn toàn miễn phí

User Benefits

  • Tiết kiệm thời gian (không cần Photoshop)
  • Không cần kỹ năng design
  • Bảo mật ảnh cá nhân
  • Không giới hạn sử dụng
  • Không watermark bắt buộc

Future Enhancements

  • Thêm filters (Vintage, B&W, Sepia)
  • Batch processing nhiều ảnh cùng lúc
  • Templates có sẵn cho từng ngành
  • AI-powered background removal
  • Collaboration features (share templates)
  • Mobile app (iOS/Android)

Try It Now

🔗 Live Demo: photo-background-maker.datnt-work.workers.dev

Hoàn toàn miễn phí, không cần đăng ký, không giới hạn!

← Back to Projects