[V0_FILE]typescriptreact:file="app/page.tsx" import PixelArtConverter from '@/components/PixelArtConverter' export default function Home() { return (

像素转换器v2

by SYD

) } [V0_FILE]typescriptreact:file="components/PixelArtConverter.tsx" 'use client' import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react' import { Slider } from "@/components/ui/slider" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { ArrowUpDown, Download, Trash2, RefreshCw, GripVertical, Scissors, X } from 'lucide-react' import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd' import { FixedSizeList as List } from 'react-window' import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" interface ColorInfo { rgb: string; num: number; posList: string[]; selected: boolean; } interface ColorStats { colors: ColorInfo[]; totalPixels: number; totalColors: number; } interface ColorGroup { rgb: string; num: number; posList: string[]; selected: boolean; } const DEFAULT_PIXEL_SIZE = 12; const DEFAULT_COLOR_MERGE_THRESHOLD = 0; export default function PixelArtConverter() { const [image, setImage] = useState(null) const [pixelSize, setPixelSize] = useState(() => { if (typeof window !== 'undefined') { return Number(localStorage.getItem('pixelSize')) || DEFAULT_PIXEL_SIZE; } return DEFAULT_PIXEL_SIZE; }) const [colorStats, setColorStats] = useState({ colors: [], totalPixels: 0, totalColors: 0 }) const [loading, setLoading] = useState(false) const [progress, setProgress] = useState(0) const [stage, setStage] = useState<'upload' | 'render' | 'analyze' | 'complete'>('upload') const [sortOrder, setSortOrder] = useState<'rgb' | 'count'>('rgb') const [allSelected, setAllSelected] = useState(true) const [colorMergeThreshold, setColorMergeThreshold] = useState(() => { if (typeof window !== 'undefined') { return Number(localStorage.getItem('colorMergeThreshold')) || DEFAULT_COLOR_MERGE_THRESHOLD; } return DEFAULT_COLOR_MERGE_THRESHOLD; }) const [pendingColorMergeThreshold, setPendingColorMergeThreshold] = useState(colorMergeThreshold) const [splitMode, setSplitMode] = useState(false) const [splitColor, setSplitColor] = useState(null) const [splitGroups, setSplitGroups] = useState([]) const [allSplitGroupsSelected, setAllSplitGroupsSelected] = useState(true) const [deleteDialogOpen, setDeleteDialogOpen] = useState(false) const [colorToDelete, setColorToDelete] = useState(null) const canvasRef = useRef(null) const fileInputRef = useRef(null) useEffect(() => { localStorage.setItem('pixelSize', pixelSize.toString()); }, [pixelSize]); useEffect(() => { localStorage.setItem('colorMergeThreshold', colorMergeThreshold.toString()); }, [colorMergeThreshold]); const mergeColors = useCallback((colors: ColorInfo[], threshold: number): ColorInfo[] => { const mergedColors: ColorInfo[] = [] colors.forEach(color => { const [r1, g1, b1] = color.rgb.match(/\d+/g)!.map(Number) const existingColor = mergedColors.find(mergedColor => { const [r2, g2, b2] = mergedColor.rgb.match(/\d+/g)!.map(Number) return Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2) <= threshold }) if (existingColor) { const [r2, g2, b2] = existingColor.rgb.match(/\d+/g)!.map(Number) const totalPixels = existingColor.num + color.num const newR = Math.round((r2 * existingColor.num + r1 * color.num) / totalPixels) const newG = Math.round((g2 * existingColor.num + g1 * color.num) / totalPixels) const newB = Math.round((b2 * existingColor.num + b1 * color.num) / totalPixels) existingColor.rgb = `rgb(${newR},${newG},${newB})` existingColor.num += color.num existingColor.posList = [...existingColor.posList, ...color.posList] } else { mergedColors.push({ ...color }) } }) return mergedColors }, []) const handleImageUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { setLoading(true) setProgress(0) setStage('upload') const reader = new FileReader() reader.onload = (e) => { setImage(e.target?.result as string) setStage('render') setProgress(0) } reader.onprogress = (e) => { if (e.lengthComputable) { setProgress((e.loaded / e.total) * 100) } } reader.readAsDataURL(file) } } const processImage = useCallback((size: number, threshold: number) => { if (image && canvasRef.current) { setLoading(true) setProgress(0) setStage('render') const canvas = canvasRef.current const ctx = canvas.getContext('2d') if (!ctx) return const img = new Image() img.onload = () => { const originalWidth = img.width const originalHeight = img.height canvas.width = originalWidth * 24 canvas.height = originalHeight * 24 const originalCanvas = document.createElement('canvas') originalCanvas.width = originalWidth originalCanvas.height = originalHeight const originalCtx = originalCanvas.getContext('2d') if (!originalCtx) return originalCtx.drawImage(img, 0, 0, originalWidth, originalHeight) const imageData = originalCtx.getImageData(0, 0, originalWidth, originalHeight) const data = imageData.data const pixelatedWidth = Math.ceil(originalWidth / size) const pixelatedHeight = Math.ceil(originalHeight / size) const totalPixels = pixelatedWidth * pixelatedHeight let processedPixels = 0 const pixelatedColors: { [key: string]: { num: number, posList: string[] } } = {} for (let y = 0; y < originalHeight; y += size) { for (let x = 0; x < originalWidth; x += size) { const i = (y * originalWidth + x) * 4 const r = data[i] const g = data[i + 1] const b = data[i + 2] const color = `rgb(${r},${g},${b})` originalCtx.fillStyle = color originalCtx.fillRect(x, y, size, size) if (!pixelatedColors[color]) { pixelatedColors[color] = { num: 0, posList: [] } } pixelatedColors[color].num += 1 pixelatedColors[color].posList.push(`${Math.floor(x / size)},${Math.floor(y / size)}`) processedPixels++ setProgress((processedPixels / totalPixels) * 100) } } ctx.imageSmoothingEnabled = false ctx.drawImage(originalCanvas, 0, 0, canvas.width, canvas.height) setStage('analyze') setProgress(0) let colorInfo: ColorInfo[] = Object.entries(pixelatedColors).map(([rgb, info]) => ({ rgb, num: info.num, posList: info.posList, selected: true })) colorInfo = mergeColors(colorInfo, threshold) const totalPixelsCount = Object.values(pixelatedColors).reduce((sum, color) => sum + color.num, 0); const totalColorsCount = colorInfo.length; setColorStats({ colors: sortColorCounts(colorInfo, 'rgb'), totalPixels: totalPixelsCount, totalColors: totalColorsCount }) setLoading(false) setStage('complete') drawNumbers(ctx, colorInfo, size * 24) } img.src = image } }, [image, mergeColors]) const drawNumbers = useCallback(( ctx: CanvasRenderingContext2D, colorInfo: ColorInfo[], pixelSize: number, splitModeColor: string | null = null, selectedGroups: ColorGroup[] | null = null ) => { const colorOrder = colorInfo.reduce((acc, color, index) => { acc[color.rgb] = index + 1 return acc }, {} as { [key: string]: number }) ctx.font = `${Math.floor(pixelSize / 3)}px Arial` ctx.textAlign = 'center' ctx.textBaseline = 'middle' colorInfo.forEach(color => { color.posList.forEach(pos => { const [x, y] = pos.split(',').map(Number) ctx.clearRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize) if (splitModeColor === null || color.rgb === splitModeColor) { if (color.selected) { const order = colorOrder[color.rgb] ctx.fillStyle = color.rgb ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize) if (splitModeColor === null) { ctx.fillStyle = getContrastColor(color.rgb) ctx.fillText( order.toString(), x * pixelSize + pixelSize / 2, y * pixelSize + pixelSize / 2 ) } } else { ctx.fillStyle = 'rgba(0, 0, 0, 1)' ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize) } } else if (selectedGroups) { const selectedGroup = selectedGroups.find(group => group.selected && group.posList.includes(pos)) if (selectedGroup) { ctx.fillStyle = selectedGroup.rgb ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize) } else { ctx.fillStyle = 'rgba(0, 0, 0, 1)' ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize) } } else { ctx.fillStyle = 'rgba(0, 0, 0, 1)' ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize) } }) }) }, []) const getContrastColor = (rgb: string) => { const [r, g, b] = rgb.match(/\d+/g)!.map(Number) const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000 return (yiq >= 128) ? 'black' : 'white' } const sortColorCounts = useCallback((colors: ColorInfo[], order: 'rgb' | 'count'): ColorInfo[] => { return colors.sort((a, b) => { if (order === 'rgb') { const sumA = a.rgb.match(/\d+/g)!.reduce((sum, num) => sum + parseInt(num), 0) const sumB = b.rgb.match(/\d+/g)!.reduce((sum, num) => sum + parseInt(num), 0) return sumB - sumA } else { return b.num - a.num } }) }, []) const handleSort = useCallback(() => { const newOrder = sortOrder === 'rgb' ? 'count' : 'rgb' setSortOrder(newOrder) setColorStats(prevStats => { const newColors = sortColorCounts([...prevStats.colors], newOrder) const canvas = canvasRef.current if (canvas) { const ctx = canvas.getContext('2d') if (ctx) { drawNumbers(ctx, newColors, pixelSize * 24, splitMode ? splitColor?.rgb : null, splitMode ? splitGroups : null) } } return { ...prevStats, colors: newColors } }) }, [sortOrder, sortColorCounts, drawNumbers, pixelSize, splitMode, splitColor, splitGroups]) const deleteColor = useCallback((indexToDelete: number) => { setColorStats(prevStats => { const newColors = prevStats.colors.filter((_, index) => index !== indexToDelete); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { ctx.clearRect(0, 0, canvas.width, canvas.height); newColors.forEach((color, index) => { color.posList.forEach(pos => { const [x, y] = pos.split(',').map(Number); ctx.fillStyle = color.rgb; ctx.fillRect(x * pixelSize * 24, y * pixelSize * 24, pixelSize * 24, pixelSize * 24); }); }); drawNumbers(ctx, newColors, pixelSize * 24, splitMode ? splitColor?.rgb : null, splitMode ? splitGroups : null); } } return { ...prevStats, colors: newColors, totalColors: newColors.length }; }); }, [pixelSize, drawNumbers, splitMode, splitColor, splitGroups]); const exportJson = useCallback(() => { const jsonContent = colorStats.colors.reduce((acc, color, index) => { acc[index + 1] = { rgb: color.rgb.match(/\d+/g)!.join(','), num: color.num, posList: color.posList } return acc }, {} as Record) const blob = new Blob([JSON.stringify(jsonContent, null, 2)], { type: 'application/json' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'color_statistics.json' document.body.appendChild(link) link.click() document.body.removeChild(link) }, [colorStats.colors]) const regenerate = useCallback(() => { if (fileInputRef.current) { const file = fileInputRef.current.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { setImage(e.target?.result as string) processImage(pixelSize, colorMergeThreshold) } reader.readAsDataURL(file) } } }, [pixelSize, colorMergeThreshold, processImage]) const toggleColorSelection = useCallback((index: number) => { setColorStats(prevStats => { const newColors = [...prevStats.colors]; newColors[index] = { ...newColors[index], selected: !newColors[index].selected }; const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, newColors, pixelSize * 24, splitMode ? splitColor?.rgb : null, splitMode ? splitGroups : null); } } return { ...prevStats, colors: newColors }; }); }, [pixelSize, drawNumbers, splitMode, splitColor, splitGroups]); const toggleAllColors = useCallback(() => { setAllSelected(prev => !prev); setColorStats(prevStats => { const newColors = prevStats.colors.map(color => ({ ...color, selected: !allSelected })) const canvas = canvasRef.current if (canvas) { const ctx = canvas.getContext('2d') if (ctx) { drawNumbers(ctx, newColors, pixelSize * 24, splitMode ? splitColor?.rgb : null, splitMode ? splitGroups : null); } } return { ...prevStats, colors: newColors }; }); }, [allSelected, pixelSize, drawNumbers, splitMode, splitColor, splitGroups]); const onDragEnd = useCallback((result: DropResult) => { if (!result.destination) { return; } setColorStats(prevStats => { const newColors = Array.from(prevStats.colors); const [reorderedItem] = newColors.splice(result.source.index, 1); newColors.splice(result.destination!.index, 0, reorderedItem); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, newColors, pixelSize * 24, splitMode ? splitColor?.rgb : null, splitMode ? splitGroups : null); } } return { ...prevStats, colors: newColors }; }); }, [pixelSize, drawNumbers, splitMode, splitColor, splitGroups]); const enterSplitMode = useCallback((color: ColorInfo) => { setSplitMode(true); setSplitColor(color); setSplitGroups([{ rgb: color.rgb, num: color.num, posList: color.posList, selected: true }]); setAllSplitGroupsSelected(true); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, colorStats.colors, pixelSize * 24, color.rgb, [{ rgb: color.rgb, num: color.num, posList: color.posList, selected: true }]); } } }, [colorStats.colors, drawNumbers, pixelSize]); const exitSplitMode = useCallback(() => { setSplitMode(false); setSplitColor(null); setSplitGroups([]); setAllSplitGroupsSelected(true); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, colorStats.colors, pixelSize * 24); } } }, [colorStats.colors, drawNumbers, pixelSize]); const splitGroup = useCallback((groupIndex: number) => { setSplitGroups(prevGroups => { const newGroups = [...prevGroups]; const groupToSplit = newGroups[groupIndex]; const halfIndex = Math.floor(groupToSplit.posList.length / 2); const group1 = { rgb: groupToSplit.rgb, num: halfIndex, posList: groupToSplit.posList.slice(0, halfIndex), selected: groupToSplit.selected }; const group2 = { rgb: groupToSplit.rgb, num: groupToSplit.posList.length - halfIndex, posList: groupToSplit.posList.slice(halfIndex), selected: groupToSplit.selected }; newGroups.splice(groupIndex, 1, group1, group2); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, colorStats.colors, pixelSize * 24, splitColor?.rgb, newGroups); } } return newGroups; }); }, [colorStats.colors, drawNumbers, pixelSize, splitColor]); const mergeGroups = useCallback((group1Index: number, group2Index: number) => { setSplitGroups(prevGroups => { const newGroups = [...prevGroups]; const group1 = newGroups[group1Index]; const group2 = newGroups[group2Index]; const mergedGroup = { rgb: group1.rgb, num: group1.num + group2.num, posList: [...group1.posList, ...group2.posList], selected: group1.selected || group2.selected }; newGroups.splice(Math.min(group1Index, group2Index), 2, mergedGroup); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, colorStats.colors, pixelSize * 24, splitColor?.rgb, newGroups); } } return newGroups; }); }, [colorStats.colors, drawNumbers, pixelSize, splitColor]); const toggleSplitGroupSelection = useCallback((index: number) => { setSplitGroups(prevGroups => { const newGroups = [...prevGroups]; newGroups[index] = { ...newGroups[index], selected: !newGroups[index].selected }; const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, colorStats.colors, pixelSize * 24, splitColor?.rgb, newGroups); } } return newGroups; }); setAllSplitGroupsSelected(prevAllSelected => { const allSelected = splitGroups.every(group => group.selected); return allSelected; }); }, [colorStats.colors, drawNumbers, pixelSize, splitColor, splitGroups]); const toggleAllSplitGroups = useCallback(() => { setAllSplitGroupsSelected(prev => !prev); setSplitGroups(prevGroups => { const newGroups = prevGroups.map(group => ({ ...group, selected: !allSplitGroupsSelected })); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, colorStats.colors, pixelSize * 24, splitColor?.rgb, newGroups); } } return newGroups; }); }, [allSplitGroupsSelected, colorStats.colors, drawNumbers, pixelSize, splitColor]); const applySplit = useCallback(() => { if (!splitColor) return; setColorStats(prevStats => { const newColors = prevStats.colors.filter(color => color.rgb !== splitColor.rgb); splitGroups.forEach(group => { newColors.push({ rgb: group.rgb, num: group.num, posList: group.posList, selected: group.selected }); }); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawNumbers(ctx, newColors, pixelSize * 24); } } return { ...prevStats, colors: sortColorCounts(newColors, sortOrder), totalColors: newColors.length }; }); exitSplitMode(); }, [splitColor, splitGroups, sortColorCounts, sortOrder, pixelSize, drawNumbers, exitSplitMode]); const handleDeleteClick = (color: ColorInfo) => { setColorToDelete(color); setDeleteDialogOpen(true); }; const confirmDelete = () => { if (colorToDelete) { const indexToDelete = colorStats.colors.findIndex(c => c.rgb === colorToDelete.rgb); if (indexToDelete !== -1) { deleteColor(indexToDelete); } } setDeleteDialogOpen(false); setColorToDelete(null); }; const memoizedColorList = useMemo(() => ( {({ index, style, data }) => ( {(provided) => (

toggleColorSelection(index)} /> {index + 1}.

{data[index].rgb}: {data[index].num}

)} )} ), [colorStats.colors, toggleColorSelection, enterSplitMode]); useEffect(() => { if (image) { processImage(pixelSize, colorMergeThreshold) } }, [image, pixelSize, colorMergeThreshold, processImage]) const getStageText = useCallback(() => { switch (stage) { case 'upload': return '上传中' case 'render': return '渲染中' case 'analyze': return '分析颜色中' case 'complete': return '完成' default: return '' } }, [stage]) return (

{loading && (

{getStageText()} - {Math.round(progress)}%

)}

像素大小: setPixelSize(value[0])} min={1} max={50} step={1} className="w-64" /> {pixelSize}px

颜色合并阈值: setPendingColorMergeThreshold(value[0])} onValueCommit={(value) => { setColorMergeThreshold(value[0]); processImage(pixelSize, value[0]); }} min={0} max={100} step={1} className="w-64" /> {pendingColorMergeThreshold}

) }

像素转换器v2

by SYD

颜色统计 (像素化后)

颜色分割模式