|
1 | 1 | import { |
2 | 2 | Input, |
3 | | - InputLeftElement, |
4 | 3 | Box, |
5 | 4 | InputGroup, |
6 | | - IconButton, |
| 5 | + Button, |
| 6 | + Image, |
| 7 | + Text, |
| 8 | + Flex, |
| 9 | + chakra, |
7 | 10 | } from "@chakra-ui/react"; |
8 | 11 | import { FiUpload } from "react-icons/fi"; |
9 | | -import { useRef } from "react"; |
| 12 | +import { useRef, useState, ChangeEvent } from "react"; |
| 13 | +import { Formik, Form, Field, ErrorMessage } from "formik"; |
| 14 | +import getAspectRatio from "@/utils/getAspectRatio"; |
| 15 | +import Resizer from "react-image-file-resizer"; |
| 16 | + |
| 17 | +interface IImage { |
| 18 | + src?: string; |
| 19 | + alt?: string; |
| 20 | + width?: number; |
| 21 | + height?: number; |
| 22 | + aspectRatio?: number[]; |
| 23 | + file?: File; |
| 24 | +} |
10 | 25 |
|
11 | 26 | const ImageResizer = (): JSX.Element => { |
12 | 27 | const inputElRef = useRef<HTMLInputElement>(null); |
| 28 | + const ogImageRef = useRef<HTMLImageElement>(null); |
| 29 | + const resizedImageRef = useRef<HTMLImageElement>(null); |
| 30 | + const [ogImage, setOgImage] = useState<IImage>(); |
| 31 | + const [resizedImage, setResizedImage] = useState<IImage>(); |
| 32 | + |
| 33 | + const handleFileChange = (e: ChangeEvent<HTMLInputElement>): void => { |
| 34 | + const fileList = e.target.files; |
| 35 | + if (!fileList) return; |
| 36 | + const file = fileList[0]; |
| 37 | + setOgImage(prev => { |
| 38 | + if (prev) { |
| 39 | + return { |
| 40 | + ...prev, |
| 41 | + src: URL.createObjectURL(file), |
| 42 | + }; |
| 43 | + } |
| 44 | + return { |
| 45 | + src: URL.createObjectURL(file), |
| 46 | + alt: file.name, |
| 47 | + width: 0, |
| 48 | + height: 0, |
| 49 | + aspectRatio: [0, 0], |
| 50 | + file, |
| 51 | + }; |
| 52 | + }); |
| 53 | + console.log(file); |
| 54 | + }; |
| 55 | + |
| 56 | + const handleOgImageLoad = (): void => { |
| 57 | + if (!ogImageRef.current) return; |
| 58 | + const ogImage = ogImageRef.current; |
| 59 | + const { width, height } = ogImage; |
| 60 | + const aspectRatio: number[] = getAspectRatio(width, height); |
| 61 | + setOgImage(prev => ({ ...prev, width, height, aspectRatio })); |
| 62 | + }; |
| 63 | + |
| 64 | + const handleResizedImageLoad = (): void => { |
| 65 | + if (!resizedImageRef.current) return; |
| 66 | + const resizedImage = resizedImageRef.current; |
| 67 | + const { width, height } = resizedImage; |
| 68 | + const aspectRatio: number[] = getAspectRatio(width, height); |
| 69 | + setResizedImage(prev => ({ ...prev, width, height, aspectRatio })); |
| 70 | + }; |
| 71 | + |
13 | 72 | return ( |
14 | 73 | <Box> |
15 | 74 | <InputGroup> |
16 | | - <InputLeftElement> |
17 | | - <IconButton |
18 | | - icon={<FiUpload />} |
19 | | - aria-label="Upload image" |
20 | | - onClick={() => inputElRef.current?.click()} |
21 | | - /> |
22 | | - <Input type="file" accept="image/*" hidden ref={inputElRef} /> |
23 | | - </InputLeftElement> |
| 75 | + <Button |
| 76 | + leftIcon={<FiUpload />} |
| 77 | + aria-label="Upload image" |
| 78 | + onClick={() => inputElRef.current?.click()} |
| 79 | + mb={4} |
| 80 | + > |
| 81 | + Upload Image |
| 82 | + </Button> |
| 83 | + <Input |
| 84 | + type="file" |
| 85 | + accept="image/*" |
| 86 | + multiple={false} |
| 87 | + hidden |
| 88 | + ref={inputElRef} |
| 89 | + onChange={handleFileChange} |
| 90 | + /> |
24 | 91 | </InputGroup> |
| 92 | + <> |
| 93 | + {ogImage?.src && ( |
| 94 | + <Image |
| 95 | + src={ogImage.src} |
| 96 | + alt={ogImage.alt} |
| 97 | + ref={ogImageRef} |
| 98 | + onLoad={handleOgImageLoad} |
| 99 | + /> |
| 100 | + )} |
| 101 | + {ogImage?.height && ogImage?.width && ogImage?.aspectRatio && ( |
| 102 | + <> |
| 103 | + <Text |
| 104 | + mt={4} |
| 105 | + fontSize="xl" |
| 106 | + >{`Original Image Dimensions: ${ogImage.width}x${ogImage.height}`}</Text> |
| 107 | + <Text |
| 108 | + mt={4} |
| 109 | + fontSize="xl" |
| 110 | + >{`Original Image Aspect Ratio: ${ogImage.aspectRatio[0]}x${ogImage.aspectRatio[1]}`}</Text> |
| 111 | + </> |
| 112 | + )} |
| 113 | + </> |
| 114 | + |
| 115 | + <Formik |
| 116 | + initialValues={{ |
| 117 | + width: 500, |
| 118 | + height: 500, |
| 119 | + }} |
| 120 | + validate={values => { |
| 121 | + const errors: any = {}; |
| 122 | + if (values.width <= 0) { |
| 123 | + errors.width = "Width must be greater than 0"; |
| 124 | + } |
| 125 | + if (values.height <= 0) { |
| 126 | + errors.height = "Height must be greater than 0"; |
| 127 | + } |
| 128 | + return errors; |
| 129 | + }} |
| 130 | + onSubmit={async (values, { setSubmitting }) => { |
| 131 | + Resizer.imageFileResizer( |
| 132 | + ogImage?.file as File, |
| 133 | + values.width, |
| 134 | + values.height, |
| 135 | + "JPEG", |
| 136 | + 100, |
| 137 | + 0, |
| 138 | + (file: any) => { |
| 139 | + setResizedImage(prev => { |
| 140 | + if (prev) { |
| 141 | + return { |
| 142 | + ...prev, |
| 143 | + src: URL.createObjectURL(file), |
| 144 | + }; |
| 145 | + } |
| 146 | + return { |
| 147 | + src: URL.createObjectURL(file), |
| 148 | + alt: file.name, |
| 149 | + width: 0, |
| 150 | + height: 0, |
| 151 | + aspectRatio: [0, 0], |
| 152 | + file, |
| 153 | + }; |
| 154 | + }); |
| 155 | + }, |
| 156 | + "file" |
| 157 | + ); |
| 158 | + |
| 159 | + Resizer.imageFileResizer( |
| 160 | + ogImage?.file as File, |
| 161 | + values.width, |
| 162 | + values.height, |
| 163 | + "JPEG", |
| 164 | + 100, |
| 165 | + 0, |
| 166 | + (uri: any) => { |
| 167 | + console.log(uri); |
| 168 | + }, |
| 169 | + "base64" |
| 170 | + ); |
| 171 | + |
| 172 | + setSubmitting(false); |
| 173 | + }} |
| 174 | + > |
| 175 | + {({ isSubmitting }) => ( |
| 176 | + <Form> |
| 177 | + <Flex alignContent="center" verticalAlign="center" my={4}> |
| 178 | + <InputGroup lineHeight="40px"> |
| 179 | + <Input |
| 180 | + as={Field} |
| 181 | + placeholder="Width" |
| 182 | + mr={2} |
| 183 | + type="number" |
| 184 | + name="width" |
| 185 | + /> |
| 186 | + <ErrorMessage name="width" /> |
| 187 | + <chakra.span |
| 188 | + textAlign="center" |
| 189 | + display="inline-block" |
| 190 | + verticalAlign="middle" |
| 191 | + > |
| 192 | + x |
| 193 | + </chakra.span> |
| 194 | + <Input |
| 195 | + as={Field} |
| 196 | + placeholder="Height" |
| 197 | + ml={2} |
| 198 | + type="number" |
| 199 | + name="height" |
| 200 | + /> |
| 201 | + <ErrorMessage name="height" /> |
| 202 | + </InputGroup> |
| 203 | + <Button ml={2} p={2} isLoading={isSubmitting} type="submit"> |
| 204 | + Resize |
| 205 | + </Button> |
| 206 | + </Flex> |
| 207 | + </Form> |
| 208 | + )} |
| 209 | + </Formik> |
| 210 | + {resizedImage && ( |
| 211 | + <> |
| 212 | + {resizedImage?.src && ( |
| 213 | + <Image |
| 214 | + src={resizedImage.src} |
| 215 | + alt={resizedImage.alt} |
| 216 | + ref={resizedImageRef} |
| 217 | + onLoad={handleResizedImageLoad} |
| 218 | + /> |
| 219 | + )} |
| 220 | + {resizedImage?.height && |
| 221 | + resizedImage?.width && |
| 222 | + resizedImage?.aspectRatio && ( |
| 223 | + <> |
| 224 | + <Text |
| 225 | + mt={4} |
| 226 | + fontSize="xl" |
| 227 | + >{`Resized Image Dimensions: ${resizedImage.width}x${resizedImage.height}`}</Text> |
| 228 | + <Text |
| 229 | + mt={4} |
| 230 | + fontSize="xl" |
| 231 | + >{`Resized Image Aspect Ratio: ${resizedImage.aspectRatio[0]}x${resizedImage.aspectRatio[1]}`}</Text> |
| 232 | + </> |
| 233 | + )} |
| 234 | + </> |
| 235 | + )} |
25 | 236 | </Box> |
26 | 237 | ); |
27 | 238 | }; |
|
0 commit comments