import * as React from 'react' ; const Image = props => { const { src , openImageViewerDialog , id } = props ; const [ imageStatus , setImageStatus ] = React . useState ( 'loading' ) ; const [ image , setImage ] = React . useState ( null ) ; const [ imageHeight , setImageHeight ] = React . useState ( null ) ; const [ imageWidth , setImageWidth ] = React . useState ( null ) ; let canvasRef = React . useRef ( ) ; const onLoad = e => { const image = e . target ; const width = image . width ; const height = image . height ; setImageStatus ( 'loaded' ) ; setImage ( image ) ; setImageHeight ( height ) ; setImageWidth ( width ) ; image . style . height = '0px' ; } ; const draw = ( ) => { if ( imageStatus === 'loaded' ) { const canvas = canvasRef . current ; const context = canvas . getContext ( '2d' ) ; canvas . height = props . height * 0.9 ; canvas . width = props . width * 0.9 ; const ratio = Math . min ( canvas . width / imageWidth , canvas . height / imageHeight ) ; canvas . height = imageHeight * ratio ; canvas . width = imageWidth * ratio ; context . filter = 'brightness(' + props . brightness + '%)  contrast(' + props . contrast + '%)' ; context . drawImage ( image , 0 , 0 , canvas . width , canvas . height ) ; image . crossOrigin = 'Anonymous' ; image . setAttribute ( 'crossOrigin' , '' ) ; } } ; React . useEffect ( ( ) => { draw ( ) ; } ) ; return ( < div > < canvas type = { 'selectableElement' } onDoubleClick = { openImageViewerDialog } imgid = { id } style = { { verticalAlign : 'middle' , padding : '2px' } } ref = { canvasRef } height = { props . height } width = { props . width } / > < img onLoad = { onLoad } alt = "foo" src = { src } style = { { visibility : 'hidden' } } /> < /div>); } ; Image . defaultProps = { brightness : 100 , contrast : 100 , unselectedChannels : [ ] } ; export default Image ;