🎨
Meme Forge Pro
"เปลี่ยนบั๊กเป็นเสียงฮา โค้ดปัญหาให้เป็นมีม!"
🚀 เกี่ยวกับโปรเจกต์
Meme Forge Pro เป็นเว็บแอปพลิเคชันสำหรับสร้างมีมที่เน้นไปที่กลุ่มนักพัฒนาซอฟต์แวร์ นักวิทยาศาสตร์ข้อมูล และผู้ที่สนใจเทคโนโลยี AI
✨ ฟีเจอร์หลัก
- 🎯 Drag & Drop Text: ลากข้อความไปตำแหน่งที่ต้องการ
- 🖼️ 22+ Templates: เทมเพลตมีมยอดนิยม
- 📱 Responsive: ใช้งานได้ทุกอุปกรณ์
- 🌙 Dark/Light Mode: เลือกธีมตามใจ
- ⚡ Real-time Preview: เห็นผลทันที
- 💾 High Quality Export: ดาวน์โหลด PNG คุณภาพสูง
🛠️ เทคโนโลยีที่ใช้
HTML5
CSS3
JavaScript
Canvas API
PWA
`;
openModal('ℹ️ เกี่ยวกับ Meme Forge Pro', aboutContent);
}
// Initialize modal system
function initializeModal() {
const modal = document.getElementById('modal');
if (!modal) {
console.error('Modal element not found');
return;
}
// Close modal when clicking overlay
modal.addEventListener('click', (event) => {
if (event.target === modal) {
closeModal();
}
});
// Prevent modal content clicks from closing modal
const modalContent = modal.querySelector('.modal-content');
if (modalContent) {
modalContent.addEventListener('click', (event) => {
event.stopPropagation();
});
}
}
// Clear meme function
function clearMeme() {
if (!canvas || !ctx) return;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Reset current image
currentImage = null;
// Clear text inputs
const topTextInput = document.getElementById('top-text');
const bottomTextInput = document.getElementById('bottom-text');
if (topTextInput) topTextInput.value = '';
if (bottomTextInput) bottomTextInput.value = '';
// Reset text elements
textElements.top.text = '';
textElements.bottom.text = '';
// Reset positions to default
textElements.top.x = 0.5;
textElements.top.y = 0.15;
textElements.bottom.x = 0.5;
textElements.bottom.y = 0.85;
// Show success message
if (typeof showToast === 'function') {
showToast('🧹 ล้างข้อมูลเรียบร้อยแล้ว', 'success');
}
// Add success animation
if (typeof addSuccessAnimation === 'function') {
addSuccessAnimation(canvas);
}
}
// Download meme function
function downloadMeme() {
if (!canvas || !currentImage) {
if (typeof showToast === 'function') {
showToast('❌ กรุณาเลือกรูปภาพก่อนดาวน์โหลด', 'error');
}
return;
}
try {
// Show loading
if (typeof showLoadingOverlay === 'function') {
showLoadingOverlay('กำลังสร้างมีม...', 'pulse');
}
// Create download link
const link = document.createElement('a');
const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '');
link.download = `meme-${timestamp}.png`;
link.href = canvas.toDataURL('image/png', 1.0);
// Trigger download
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Hide loading and show success
setTimeout(() => {
if (typeof hideLoadingOverlay === 'function') {
hideLoadingOverlay();
}
if (typeof showToast === 'function') {
showToast('🎉 ดาวน์โหลดสำเร็จ!', 'success');
}
}, 500);
} catch (error) {
console.error('Download failed:', error);
if (typeof hideLoadingOverlay === 'function') {
hideLoadingOverlay();
}
if (typeof showToast === 'function') {
showToast('❌ เกิดข้อผิดพลาดในการดาวน์โหลด', 'error');
}
}
}
// Enhanced Draggable Text System
// Initialize draggable text system
function initializeDraggableText() {
try {
// Check requirements
if (!canvas) {
console.error('Canvas not found');
return false;
}
if (!textElements) {
console.error('textElements not defined');
return false;
}
if (!dragState) {
console.error('dragState not defined');
return false;
}
// Remove existing listeners to prevent duplicates
canvas.removeEventListener('mousedown', handleTextMouseDown);
canvas.removeEventListener('mousemove', handleTextMouseMove);
canvas.removeEventListener('mouseup', handleTextMouseUp);
canvas.removeEventListener('mouseleave', handleTextMouseUp);
canvas.removeEventListener('touchstart', handleTextTouchStart);
canvas.removeEventListener('touchmove', handleTextTouchMove);
canvas.removeEventListener('touchend', handleTextTouchEnd);
// Add new listeners
canvas.addEventListener('mousedown', handleTextMouseDown);
canvas.addEventListener('mousemove', handleTextMouseMove);
canvas.addEventListener('mouseup', handleTextMouseUp);
canvas.addEventListener('mouseleave', handleTextMouseUp);
// Touch events with passive: false for preventDefault to work
canvas.addEventListener('touchstart', handleTextTouchStart, {passive: false});
canvas.addEventListener('touchmove', handleTextTouchMove, {passive: false});
canvas.addEventListener('touchend', handleTextTouchEnd);
// Update text when inputs change
const topTextInput = document.getElementById('top-text');
const bottomTextInput = document.getElementById('bottom-text');
if (topTextInput) {
topTextInput.removeEventListener('input', updateTextElements);
topTextInput.addEventListener('input', updateTextElements);
}
if (bottomTextInput) {
bottomTextInput.removeEventListener('input', updateTextElements);
bottomTextInput.addEventListener('input', updateTextElements);
}
// Initialize reset button
const resetBtn = document.getElementById('reset-positions-btn');
if (resetBtn) {
resetBtn.removeEventListener('click', resetTextPositions);
resetBtn.addEventListener('click', resetTextPositions);
}
return true;
} catch (error) {
console.error('Error initializing draggable text:', error);
return false;
}
}
// Handle mouse down event for draggable text
function handleTextMouseDown(e) {
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) * (canvas.width / rect.width);
const y = (e.clientY - rect.top) * (canvas.height / rect.height);
const elementKey = getTextElementAt(x, y);
if (elementKey) {
dragState.isDragging = true;
dragState.currentElement = textElements[elementKey];
dragState.startX = x;
dragState.startY = y;
dragState.offsetX = x - (textElements[elementKey].x * canvas.width);
dragState.offsetY = y - (textElements[elementKey].y * canvas.height);
// Visual feedback
canvas.style.cursor = 'grabbing';
canvas.classList.add('dragging');
e.preventDefault();
}
}
// Handle mouse move event for draggable text
function handleTextMouseMove(e) {
if (dragState.isDragging && dragState.currentElement) {
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) * (canvas.width / rect.width);
const y = (e.clientY - rect.top) * (canvas.height / rect.height);
// Update position
dragState.currentElement.x = Math.max(0, Math.min(1, (x - dragState.offsetX) / canvas.width));
dragState.currentElement.y = Math.max(0, Math.min(1, (y - dragState.offsetY) / canvas.height));
// Redraw canvas
drawMemeWithDraggableText();
e.preventDefault();
}
}
// Handle mouse up event for draggable text
function handleTextMouseUp(e) {
if (dragState.isDragging) {
// Reset drag state
dragState.isDragging = false;
dragState.currentElement = null;
// Reset cursor and visual feedback
canvas.style.cursor = 'default';
canvas.classList.remove('dragging');
// Redraw canvas to finalize position
drawMemeWithDraggableText();
e.preventDefault();
}
}
// Handle touch start event for draggable text
function handleTextTouchStart(e) {
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
const x = (touch.clientX - rect.left) * (canvas.width / rect.width);
const y = (touch.clientY - rect.top) * (canvas.height / rect.height);
const elementKey = getTextElementAt(x, y);
if (elementKey) {
dragState.isDragging = true;
dragState.currentElement = textElements[elementKey];
dragState.startX = x;
dragState.startY = y;
dragState.offsetX = x - (textElements[elementKey].x * canvas.width);
dragState.offsetY = y - (textElements[elementKey].y * canvas.height);
// Visual feedback
canvas.classList.add('dragging');
e.preventDefault();
}
}
// Handle touch move event for draggable text
function handleTextTouchMove(e) {
if (dragState.isDragging && dragState.currentElement) {
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
const x = (touch.clientX - rect.left) * (canvas.width / rect.width);
const y = (touch.clientY - rect.top) * (canvas.height / rect.height);
// Update position
dragState.currentElement.x = Math.max(0, Math.min(1, (x - dragState.offsetX) / canvas.width));
dragState.currentElement.y = Math.max(0, Math.min(1, (y - dragState.offsetY) / canvas.height));
// Redraw canvas
drawMemeWithDraggableText();
e.preventDefault();
}
}
// Handle touch end event for draggable text
function handleTextTouchEnd(e) {
if (dragState.isDragging) {
// Reset drag state
dragState.isDragging = false;
dragState.currentElement = null;
// Reset visual feedback
canvas.classList.remove('dragging');
// Redraw canvas to finalize position
drawMemeWithDraggableText();
e.preventDefault();
}
}
// Update text elements from inputs
function updateTextElements() {
textElements.top.text = document.getElementById('top-text').value;
textElements.bottom.text = document.getElementById('bottom-text').value;
drawMemeWithDraggableText();
}
// Core function to draw meme with draggable text
function drawMemeWithDraggableText() {
if (!currentImage || !canvas || !ctx) return;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background image
ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
// Draw text elements
Object.keys(textElements).forEach(key => {
const element = textElements[key];
if (element.text) {
drawTextElement(element);
}
});
}
// Draw individual text element
function drawTextElement(element) {
const x = element.x * canvas.width;
const y = element.y * canvas.height;
// Set text properties
ctx.font = `${element.fontSize}px ${element.fontFamily}`;
ctx.textAlign = element.align;
ctx.textBaseline = 'middle';
ctx.fillStyle = element.color;
ctx.strokeStyle = element.strokeColor;
ctx.lineWidth = element.strokeWidth;
ctx.lineJoin = 'round';
ctx.miterLimit = 2;
// Text wrapping
const words = element.text.split(' ');
const maxWidth = canvas.width * 0.9;
const lines = [];
let currentLine = '';
words.forEach(word => {
const testLine = currentLine + (currentLine ? ' ' : '') + word;
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && currentLine) {
lines.push(currentLine);
currentLine = word;
} else {
currentLine = testLine;
}
});
if (currentLine) {
lines.push(currentLine);
}
// Draw lines
const lineHeight = element.fontSize * 1.2;
const totalHeight = lines.length * lineHeight;
const startY = y - (totalHeight / 2) + (lineHeight / 2);
lines.forEach((line, index) => {
const lineY = startY + (index * lineHeight);
// Draw stroke (outline)
ctx.strokeText(line, x, lineY);
// Draw fill
ctx.fillText(line, x, lineY);
});
}
// Update text elements from input fields
function updateTextElements() {
const topText = document.getElementById('top-text');
const bottomText = document.getElementById('bottom-text');
if (topText) {
textElements.top.text = topText.value;
}
if (bottomText) {
textElements.bottom.text = bottomText.value;
}
drawMemeWithDraggableText();
}
// Enhanced meme drawing function
function drawMemeWithDraggableText() {
if (!currentImage) return;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw image
ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
// Draw all text elements
Object.keys(textElements).forEach(key => {
const element = textElements[key];
if (element.text) {
drawDraggableText(element);
}
});
// Draw drag indicators if dragging
if (dragState.isDragging && dragState.currentElement) {
drawDragIndicator(dragState.currentElement);
}
}
// Draw individual text element
function drawDraggableText(element) {
const x = element.x * canvas.width;
const y = element.y * canvas.height;
// Set text properties
ctx.font = `${element.fontSize}px ${element.fontFamily} `;
ctx.textAlign = element.align;
ctx.textBaseline = 'middle';
ctx.fillStyle = element.color;
ctx.strokeStyle = element.strokeColor;
ctx.lineWidth = element.strokeWidth;
ctx.lineJoin = 'round';
ctx.miterLimit = 2;
// Draw text with word wrapping
const words = element.text.split(' ');
const maxWidth = canvas.width * 0.9;
const lines = [];
let currentLine = '';
words.forEach(word => {
const testLine = currentLine + (currentLine ? ' ' : '') + word;
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && currentLine) {
lines.push(currentLine);
currentLine = word;
} else {
currentLine = testLine;
}
});
if (currentLine) {
lines.push(currentLine);
}
// Draw each line
const lineHeight = element.fontSize * 1.2;
const totalHeight = lines.length * lineHeight;
const startY = y - (totalHeight / 2) + (lineHeight / 2);
lines.forEach((line, index) => {
const lineY = startY + (index * lineHeight);
// Draw stroke (outline)
ctx.strokeText(line, x, lineY);
// Draw fill
ctx.fillText(line, x, lineY);
});
}
// Update canvas size display and styling
function updateCanvasSize() {
if (!canvas) return;
const container = canvas.parentElement;
if (!container) return;
// Update container styling
container.style.maxWidth = canvas.width + 'px';
container.style.margin = '0 auto';
// Add responsive scaling
const maxWidth = Math.min(window.innerWidth * 0.9, 800);
if (canvas.width > maxWidth) {
const scale = maxWidth / canvas.width;
canvas.style.width = (canvas.width * scale) + 'px';
canvas.style.height = (canvas.height * scale) + 'px';
} else {
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
}
// Update canvas attributes for better display
canvas.style.border = '2px solid var(--glass-border)';
canvas.style.borderRadius = 'var(--radius-lg)';
canvas.style.boxShadow = 'var(--shadow-lg)';
canvas.style.background = '#f8f9fa';
}
// Enhanced text element detection
function getTextElementAt(x, y) {
const relativeX = x / canvas.width;
const relativeY = y / canvas.height;
for (let key of Object.keys(textElements)) {
const element = textElements[key];
if (!element.text) continue;
// Calculate actual text bounds more accurately
ctx.font = `${element.fontSize}px ${element.fontFamily}`;
const metrics = ctx.measureText(element.text);
const textWidth = metrics.width / canvas.width;
const textHeight = (element.fontSize * 1.5) / canvas.height;
const textX = element.x;
const textY = element.y;
// Create generous hit area for easy selection
const hitAreaX = Math.max(textWidth / 2, 0.15); // อย่างน้อย 15% ของ canvas
const hitAreaY = Math.max(textHeight / 2, 0.08); // อย่างน้อย 8% ของ canvas
if (Math.abs(relativeX - textX) < hitAreaX &&
Math.abs(relativeY - textY) < hitAreaY) {
return key;
}
}
return null;
}
// Enhanced text positioning with better visual feedback
function drawEnhancedDraggableText(element) {
const x = element.x * canvas.width;
const y = element.y * canvas.height;
// Set text properties
ctx.font = `${element.fontSize}px ${element.fontFamily}`;
ctx.textAlign = element.align;
ctx.textBaseline = 'middle';
ctx.fillStyle = element.color;
ctx.strokeStyle = element.strokeColor;
ctx.lineWidth = element.strokeWidth;
ctx.lineJoin = 'round';
ctx.miterLimit = 2;
// Enhanced text rendering with better wrapping
const text = element.text;
if (!text) return;
const words = text.split(' ');
const maxWidth = canvas.width * 0.95; // ใช้พื้นที่เกือบเต็ม canvas
const lines = [];
let currentLine = '';
words.forEach(word => {
const testLine = currentLine + (currentLine ? ' ' : '') + word;
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && currentLine) {
lines.push(currentLine);
currentLine = word;
} else {
currentLine = testLine;
}
});
if (currentLine) {
lines.push(currentLine);
}
// Draw each line with enhanced positioning
const lineHeight = element.fontSize * 1.2;
const totalHeight = lines.length * lineHeight;
const startY = y - (totalHeight / 2) + (lineHeight / 2);
lines.forEach((line, index) => {
const lineY = startY + (index * lineHeight);
// Add drop shadow for better visibility
ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
// Draw stroke (outline)
ctx.strokeText(line, x, lineY);
ctx.restore();
// Draw fill
ctx.fillText(line, x, lineY);
});
// Show coordinates when dragging
if (dragState.isDragging && dragState.currentElement === element) {
ctx.save();
ctx.font = '14px Arial';
ctx.fillStyle = '#00d4ff';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
const coordText = `X: ${Math.round(element.x * 100)}%, Y: ${Math.round(element.y * 100)}%`;
const coordX = Math.min(x + 20, canvas.width - 120);
const coordY = Math.max(y - 40, 20);
// Background for coordinates
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(coordX - 5, coordY - 5, 110, 25);
// Coordinate text
ctx.fillStyle = '#00d4ff';
ctx.fillText(coordText, coordX, coordY);
ctx.restore();
}
}
// Override the original drawDraggableText function
function drawDraggableText(element) {
drawEnhancedDraggableText(element);
}
// Set default meme template with error handling
function setDefaultMeme() {
try {
// Wait for templates to be loaded from templates.js
if (typeof memeTemplates === 'undefined' || !memeTemplates.length) {
setTimeout(setDefaultMeme, 300);
return;
}
// Check if canvas is ready
if (!canvas || !ctx) {
setTimeout(setDefaultMeme, 200);
return;
}
// Set default template to first one (Distracted Boyfriend)
const defaultTemplate = memeTemplates.find(t => t.name === "Distracted Boyfriend") || memeTemplates[0];
if (defaultTemplate && currentImage) {
// Already have a template loaded
return;
}
if (defaultTemplate) {
setTimeout(() => {
loadTemplate(defaultTemplate);
}, 100);
} else {
console.warn('No default template found');
}
} catch (error) {
console.error('Error in setDefaultMeme:', error);
// Retry after delay
setTimeout(setDefaultMeme, 500);
}
}
// Enhanced template loading with error handling
function loadTemplate(template) {
try {
if (!template || !template.src) {
console.error('Invalid template:', template);
if (typeof showToast === 'function') {
showToast('❌ เทมเพลตไม่ถูกต้อง', 'error');
}
return;
}
// Show loading state
if (typeof showLoadingOverlay === 'function') {
showLoadingOverlay('กำลังโหลดเทมเพลต...', 'pulse');
}
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
try {
currentImage = img;
canvas.width = template.width || img.naturalWidth;
canvas.height = template.height || img.naturalHeight;
// Update canvas size and position
updateCanvasSize();
// Reset text positions for new template
textElements.top.x = 0.5;
textElements.top.y = 0.15;
textElements.bottom.x = 0.5;
textElements.bottom.y = 0.85;
// Update text and redraw
updateTextElements();
drawMemeWithDraggableText();
// Hide loading
if (typeof hideLoadingOverlay === 'function') {
hideLoadingOverlay();
}
// Success feedback
if (typeof showToast === 'function') {
showToast('✨ โหลด ' + template.name + ' สำเร็จ!', 'success');
}
// Add success animation
if (typeof addSuccessAnimation === 'function') {
addSuccessAnimation(canvas);
}
} catch (error) {
console.error('Error processing loaded template:', error);
if (typeof hideLoadingOverlay === 'function') {
hideLoadingOverlay();
}
if (typeof showToast === 'function') {
showToast('❌ เกิดข้อผิดพลาดในการประมวลผลเทมเพลต', 'error');
}
}
};
img.onerror = function() {
console.error('Failed to load template image:', template.src);
if (typeof hideLoadingOverlay === 'function') {
hideLoadingOverlay();
}
if (typeof showToast === 'function') {
showToast('❌ ไม่สามารถโหลดรูปภาพเทมเพลตได้', 'error');
}
};
img.src = template.src;
} catch (error) {
console.error('Error in loadTemplate:', error);
if (typeof hideLoadingOverlay === 'function') {
hideLoadingOverlay();
}
if (typeof showToast === 'function') {
showToast('❌ เกิดข้อผิดพลาดในการโหลดเทมเพลต', 'error');
}
}
}