);
};
```
```css
.drop-zone.zoomed {
overflow: auto;
cursor: move;
scrollbar-width: none;
}
.drop-zone.zoomed .ascii-output {
transform: scale(var(--zoom-scale, 1));
transform-origin: 0 0;
transition: transform 0.3s ease;
}
```
--------------------------------
### Mobile Device Detection - User Agent Matching
Source: https://context7.com/solst-ice/itoa/llms.txt
Detects mobile platforms using regular expression matching against navigator.userAgent string. Returns boolean indicating mobile device status to adjust default size settings and enable mobile-specific features like native share API. Supports Android, iOS, BlackBerry, and other mobile platforms.
```javascript
function isMobileDevice() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
}
const App = () => {
const [size, setSize] = useState(isMobileDevice() ? 'small' : 'medium');
const sizeMap = {
small: 60,
medium: 150,
large: isMobileDevice() ? 225 : 300
};
return (
{/* Mobile-optimized UI */}
);
};
```
--------------------------------
### Export ASCII Art to PNG in JavaScript
Source: https://context7.com/solst-ice/itoa/llms.txt
Renders ASCII art to a canvas and exports it as a high-quality PNG. It enhances colors, supports mobile sharing, and uses monospace font metrics for precise positioning. This function requires 'asciiArt', 'colorAsciiArt', 'useColor' variables, and potentially the Web Share API.
```javascript
const handleSaveAscii = () => {
if (!asciiArt && !colorAsciiArt) return;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const lines = asciiArt.split('\n').filter(line => line.length > 0);
const charHeight = lines.length;
const charWidth = lines[0].length;
const baseScale = 32;
const charAspectRatio = 0.6;
canvas.width = Math.ceil(charWidth * baseScale * charAspectRatio);
canvas.height = Math.ceil(charHeight * baseScale);
ctx.fillStyle = '#0a0a0f';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.textRendering = 'geometricPrecision';
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
const fontSize = baseScale;
ctx.font = `bold ${fontSize}px "Courier New"`;
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
if (useColor) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = colorAsciiArt;
const pre = tempDiv.querySelector('pre');
const spans = Array.from(pre.querySelectorAll('span'));
let spanIndex = 0;
lines.forEach((line, lineIndex) => {
for (let charIndex = 0; charIndex < line.length; charIndex++) {
if (spanIndex < spans.length) {
const span = spans[spanIndex];
const color = span.style.color;
const rgb = color.match(/\d+/g);
const brightenedColor = `rgb(${Math.min(255, parseInt(rgb[0]) * 1.3)}, ${Math.min(255, parseInt(rgb[1]) * 1.3)}, ${Math.min(255, parseInt(rgb[2]) * 1.3)})`;
ctx.fillStyle = brightenedColor;
ctx.fillText(
span.textContent,
Math.round(charIndex * fontSize * charAspectRatio),
Math.round(lineIndex * fontSize)
);
spanIndex++;
}
}
});
} else {
ctx.fillStyle = '#ff2b9d';
lines.forEach((line, i) => {
ctx.fillText(line, 0, Math.round(i * fontSize));
});
}
canvas.toBlob((blob) => {
if (navigator.share && /Android|webOS|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
const file = new File([blob], 'ascii-art.png', { type: 'image/png' });
navigator.share({
files: [file],
title: 'ASCII Art',
text: 'Created with ITOA'
}).catch(console.error);
} else {
const link = document.createElement('a');
link.download = 'ascii-art.png';
link.href = URL.createObjectURL(blob);
link.click();
setTimeout(() => URL.revokeObjectURL(link.href), 100);
}
}, 'image/png', 1.0);
};
```
--------------------------------
### Handle Image Drop Events in JavaScript
Source: https://context7.com/solst-ice/itoa/llms.txt
Processes drag-and-drop events for image files. It validates that dropped files are images and initiates the ASCII conversion. Dependencies include React's useState, useCallback, and a convertToAscii function.
```javascript
const App = () => {
const [isDragging, setIsDragging] = useState(false);
const handleDragOver = useCallback((e) => {
e.preventDefault();
setIsDragging(true);
}, []);
const handleDragLeave = useCallback((e) => {
e.preventDefault();
setIsDragging(false);
}, []);
const handleDrop = useCallback((e) => {
e.preventDefault();
setIsDragging(false);
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
convertToAscii(file);
}
}, [convertToAscii]);
return (
{asciiArt ? (
{asciiArt}
) : (
DROP IMAGE HERE[ jpg / png / gif ]
)}
);
};
```
--------------------------------
### Animated Favicon Generator - Canvas API
Source: https://context7.com/solst-ice/itoa/llms.txt
Dynamically generates and updates the browser favicon using Canvas API, creating a 32x32 pixel icon with custom text and glow effects. Cycles between neon colors every 1.5 seconds within a React useEffect hook for continuous animation. Requires DOM access and supports custom color arrays.
```javascript
function updateFavicon(color) {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#0a0a0f';
ctx.fillRect(0, 0, 32, 32);
ctx.fillStyle = color;
ctx.font = 'bold 16px Courier New';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('i2a', 16, 16);
ctx.shadowColor = color;
ctx.shadowBlur = 4;
ctx.fillText('i2a', 16, 16);
const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = canvas.toDataURL();
document.head.appendChild(link);
}
useEffect(() => {
const colors = ['#00f3ff', '#ff2b9d'];
let colorIndex = 0;
const faviconInterval = setInterval(() => {
updateFavicon(colors[colorIndex]);
colorIndex = (colorIndex + 1) % colors.length;
}, 1500);
updateFavicon(colors[0]);
return () => clearInterval(faviconInterval);
}, []);
```
--------------------------------
### JavaScript Image to ASCII Conversion Function
Source: https://context7.com/solst-ice/itoa/llms.txt
The 'convertToAscii' function processes an image file using the HTML Canvas API to generate both monochrome and colored ASCII art. It calculates optimal dimensions, maps pixel brightness to characters, and supports customizable character sets. This function is essential for the core functionality of the ITOA application.
```javascript
import { useState, useCallback } from 'react';
const App = () => {
const [asciiArt, setAsciiArt] = useState('');
const [colorAsciiArt, setColorAsciiArt] = useState('');
const [asciiChars] = useState(' .:-=+*#%@');
const [size] = useState('medium');
const sizeMap = { small: 60, medium: 150, large: 300 };
const convertToAscii = useCallback(async (file, customChars = null) => {
const img = new Image();
img.src = URL.createObjectURL(file);
await new Promise((resolve) => {
img.onload = resolve;
});
const MAX_ASCII_SIZE = sizeMap[size];
const aspectRatio = img.width / img.height;
const charAspectRatio = 0.6;
const adjustedAspectRatio = aspectRatio / charAspectRatio;
let charWidth, charHeight;
if (adjustedAspectRatio > 1) {
charWidth = MAX_ASCII_SIZE;
charHeight = Math.round(charWidth / adjustedAspectRatio);
} else {
charHeight = MAX_ASCII_SIZE;
charWidth = Math.round(charHeight * adjustedAspectRatio);
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = charWidth;
canvas.height = charHeight;
ctx.drawImage(img, 0, 0, charWidth, charHeight);
try {
const imageData = ctx.getImageData(0, 0, charWidth, charHeight);
const charsToUse = customChars || asciiChars;
const charArray = Array.from(charsToUse);
let monoAscii = '';
let lines = [];
for (let y = 0; y < charHeight; y++) {
let line = [];
for (let x = 0; x < charWidth; x++) {
const offset = (y * charWidth + x) * 4;
const r = imageData.data[offset];
const g = imageData.data[offset + 1];
const b = imageData.data[offset + 2];
const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
const charIndex = Math.min(
Math.floor((brightness / 255) * charArray.length),
charArray.length - 1
);
line.push(charArray[charIndex]);
}
lines.push(line);
monoAscii += line.join('') + '\n';
}
let colorHtml = '
';
for (let y = 0; y < charHeight; y++) {
for (let x = 0; x < charWidth; x++) {
const offset = (y * charWidth + x) * 4;
const r = imageData.data[offset];
const g = imageData.data[offset + 1];
const b = imageData.data[offset + 2];
const char = lines[y][x];
const escapedChar = char
.replace(/&/g, '&')
.replace(//g, '>');
colorHtml += `${escapedChar}`;
}
colorHtml += '\n';
}
colorHtml += '
';
setAsciiArt(monoAscii);
setColorAsciiArt(colorHtml);
} catch (error) {
console.error('Error converting image to ASCII:', error);
} finally {
URL.revokeObjectURL(img.src);
}
}, [size, asciiChars]);
return null;
};
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.