| import { useCallback, useRef, useEffect, useState, useReducer } from 'react' |
|
|
| export function useImageLoader() { |
| const fileInputRef = useRef<HTMLInputElement>(null) |
|
|
| const loadImage = useCallback( |
| (file: File): Promise<{ image: HTMLImageElement; imageData: ImageData }> => { |
| return new Promise((resolve, reject) => { |
| const url = URL.createObjectURL(file) |
| const img = new Image() |
| img.onload = () => { |
| const canvas = document.createElement('canvas') |
| canvas.width = img.width |
| canvas.height = img.height |
| const ctx = canvas.getContext('2d') |
| if (!ctx) { |
| URL.revokeObjectURL(url) |
| reject(new Error('Failed to get canvas context')) |
| return |
| } |
| ctx.drawImage(img, 0, 0) |
| const imageData = ctx.getImageData(0, 0, img.width, img.height) |
| URL.revokeObjectURL(url) |
| resolve({ image: img, imageData }) |
| } |
| img.onerror = () => { |
| URL.revokeObjectURL(url) |
| reject(new Error('Failed to load image')) |
| } |
| img.src = url |
| }) |
| }, |
| [] |
| ) |
|
|
| const openFileDialog = useCallback(() => { |
| fileInputRef.current?.click() |
| }, []) |
|
|
| const handleFileSelect = useCallback( |
| (event: React.ChangeEvent<HTMLInputElement>, onLoad: (data: { image: HTMLImageElement; imageData: ImageData }) => void) => { |
| const file = event.target.files?.[0] |
| if (!file) return |
|
|
| if (!file.type.startsWith('image/')) { |
| alert('Please select an image file') |
| return |
| } |
|
|
| loadImage(file).then(onLoad).catch((error) => { |
| alert(`Failed to load image: ${error.message}`) |
| }) |
| }, |
| [loadImage] |
| ) |
|
|
| return { |
| fileInputRef, |
| loadImage, |
| openFileDialog, |
| handleFileSelect, |
| } |
| } |
|
|
| export function useDragAndDrop(onLoad: (image: HTMLImageElement, imageData: ImageData) => void) { |
| const [isDragging, setIsDragging] = useState(false) |
|
|
| const loadImageFromFile = useCallback( |
| (file: File): Promise<{ image: HTMLImageElement; imageData: ImageData }> => { |
| return new Promise((resolve, reject) => { |
| const url = URL.createObjectURL(file) |
| const img = new Image() |
| img.onload = () => { |
| const canvas = document.createElement('canvas') |
| canvas.width = img.width |
| canvas.height = img.height |
| const ctx = canvas.getContext('2d') |
| if (!ctx) { |
| URL.revokeObjectURL(url) |
| reject(new Error('Failed to get canvas context')) |
| return |
| } |
| ctx.drawImage(img, 0, 0) |
| const imageData = ctx.getImageData(0, 0, img.width, img.height) |
| URL.revokeObjectURL(url) |
| resolve({ image: img, imageData }) |
| } |
| img.onerror = () => { |
| URL.revokeObjectURL(url) |
| reject(new Error('Failed to load image')) |
| } |
| img.src = url |
| }) |
| }, |
| [] |
| ) |
|
|
| const handleDragOver = useCallback((e: React.DragEvent) => { |
| e.preventDefault() |
| e.stopPropagation() |
| setIsDragging(true) |
| }, []) |
|
|
| const handleDragLeave = useCallback((e: React.DragEvent) => { |
| e.preventDefault() |
| e.stopPropagation() |
| setIsDragging(false) |
| }, []) |
|
|
| const handleDrop = useCallback( |
| async (e: React.DragEvent) => { |
| e.preventDefault() |
| e.stopPropagation() |
| setIsDragging(false) |
|
|
| const file = e.dataTransfer.files[0] |
| if (!file || !file.type.startsWith('image/')) return |
|
|
| try { |
| const { image, imageData } = await loadImageFromFile(file) |
| onLoad(image, imageData) |
| } catch (error) { |
| alert(`Failed to load image: ${error instanceof Error ? error.message : 'Unknown error'}`) |
| } |
| }, |
| [onLoad, loadImageFromFile] |
| ) |
|
|
| return { |
| handleDragOver, |
| handleDragLeave, |
| handleDrop, |
| isDragging, |
| } |
| } |
