import { Area } from "react-easy-crop/types" ; const createImage = ( url ) : Promise < HTMLImageElement > => new Promise ( ( resolve , reject ) => { const image = new Image ( ) ; image . addEventListener ( 'load' , ( ) => resolve ( image ) ) ; image . addEventListener ( 'error' , error => reject ( error ) ) ; image . setAttribute ( 'crossOrigin' , 'anonymous' ) ; image . src = url ; } ) ; param { File } imageSrc param { Object } pixelCrop const getCroppedImg = async ( imageSrc , pixelCrop ) : Promise < string > => { let image ; try { image = await createImage ( imageSrc ) ; } catch ( e ) { return '' ; } const canvas = document . createElement ( 'canvas' ) ; const ctx = canvas . getContext ( '2d' ) ; const maxSize = Math . max ( image . width , image . height ) ; const safeArea = 2 * ( ( maxSize / 2 ) * Math . sqrt ( 2 ) ) ; canvas . width = safeArea ; canvas . height = safeArea ; if ( ctx ) { ctx . translate ( safeArea / 2 , safeArea / 2 ) ; ctx . translate ( - safeArea / 2 , - safeArea / 2 ) ; ctx . drawImage ( image , safeArea / 2 - image . width * 0.5 , safeArea / 2 - image . height * 0.5 ) ; const data = ctx . getImageData ( 0 , 0 , safeArea , safeArea ) ; canvas . width = pixelCrop . width ; canvas . height = pixelCrop . height ; ctx . putImageData ( data , 0 - safeArea / 2 + image . width * 0.5 - pixelCrop . x , 0 - safeArea / 2 + image . height * 0.5 - pixelCrop . y ) ; } return new Promise ( resolve => canvas . toBlob ( file => resolve ( URL . createObjectURL ( file ) ) , 'image/png' ) ) ; } ; export default getCroppedImg ;