6620912
Promise.catch (async)
(anonymous) @ App.tsx:49
commitHookEffectListMount @ react-dom_client.js?v=a95a0b27:16902
commitPassiveMountOnFiber @ react-dom_client.js?v=a95a0b27:18150
commitPassiveMountEffects_complete @ react-dom_client.js?v=a95a0b27:18123
commitPassiveMountEffects_begin @ react-dom_client.js?v=a95a0b27:18113
commitPassiveMountEffects @ react-dom_client.js?v=a95a0b27:18103
flushPassiveEffectsImpl @ react-dom_client.js?v=a95a0b27:19484
flushPassiveEffects @ react-dom_client.js?v=a95a0b27:19441
commitRootImpl @ react-dom_client.js?v=a95a0b27:19410
commitRoot @ react-dom_client.js?v=a95a0b27:19271
performSyncWorkOnRoot @ react-dom_client.js?v=a95a0b27:18889
flushSyncCallbacks @ react-dom_client.js?v=a95a0b27:9133
flushSync @ react-dom_client.js?v=a95a0b27:18953
finishEventHandler @ react-dom_client.js?v=a95a0b27:3567
batchedUpdates @ react-dom_client.js?v=a95a0b27:3580
dispatchEventForPluginEventSystem @ react-dom_client.js?v=a95a0b27:7174
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom_client.js?v=a95a0b27:5476
dispatchEvent @ react-dom_client.js?v=a95a0b27:5470
dispatchDiscreteEvent @ react-dom_client.js?v=a95a0b27:5447

import { FC, useEffect, useRef, useState } from 'react'
declare const cv: any
const Canvas = (width: number, height: number) => {
	const canvas = document.createElement('canvas')
	canvas.width = width
	canvas.height = height
	return canvas
}
const App: FC = () => {
	const [OriginalImage, SetOriginalImage] = useState<string>('')
	const PreviewCanvasRef = useRef<HTMLCanvasElement>(null)
	useEffect(() => {
		if (!OriginalImage) return
		const asyncWrapper = async () => {
			if (!PreviewCanvasRef.current) return
      const image = await new Promise<HTMLImageElement>(resolve => {
        const img = new Image()
        img.onload = () => resolve(img)
        img.src = OriginalImage
      })
			const canvas = Canvas(image.width, image.height)
			const ctx = canvas.getContext('2d')
			ctx?.drawImage(image, 0, 0)
			const rawImage = cv.imread(canvas)
			const tresholdImage = new cv.Mat()
			cv.threshold(rawImage, tresholdImage, 0, 255, cv.THRESH_OTSU)
			cv.imshow(PreviewCanvasRef.current, tresholdImage)
			rawImage.delete()
			tresholdImage.delete()
		}
		asyncWrapper().catch(console.error)
	}, [OriginalImage])
	return (
		<div>
			<input
				type='file'
				name='file'
				accept='image/*'
				onChange={event => {
					SetOriginalImage(prev => {
						if (!event.target.files?.[0]) return prev
						if (prev) URL.revokeObjectURL(prev)
						return URL.createObjectURL(event.target.files[0])
					})
				}}
			/>
			<img alt='Original input' src={OriginalImage} />
			<canvas ref={PreviewCanvasRef} />
		</div>
	)
}
export default App

const grayscaleImage = new cv.Mat()
cv.cvtColor(rawImage, grayscaleImage, cv.COLOR_RGBA2GRAY, 0)