A React Component implementation of ImageTune, an automatic browser-based image resizer and compressor.
Check out the demo here.
Install ImageTune React
npm i imagetune-reactThen import and use it like a regular React component.
importReact,{useState}from'react';importImageTunefrom'imagetune-react';constForm=()=>{const[email,setEmail]=useState('');const[image,setImage]=useState(null);consthandleEmail=(evt)=>{setEmail(evt.target.value)}consthandleImage=(evt)=>{setImage(evt.target.files[0])}consthandleSubmit=(evt)=>{// handle file uploads like you usually would}return(<formclassName="form"onSubmit={handleSubmit}><inputtype="text"name="email"value={email}/><ImageTuneonChange={handleFile}width=512height=512quality=90/></form>
);
}The ImageTune React component is just a native file picker component. When the user selects a file, ImageTune runs automatically and swaps out the selected file for a resized and compressed one generated by ImageTune.
To the end user, there is no difference between this component and the native file picker, but when the upload process begins bandwidth and upload times can be reduced by over 90%.
| Name | Description | Default |
|---|---|---|
| width | Desired width of result image in pixels | 200 |
| height | Desired height of result image in pixels | 200 |
| quality | Image quality value, changes file size (1-100) | 100 |
| type | Image format type (png, jpg, gif) | jpg |
| mode | Scale mode (crop or scale) | scale |
Because we use the native File constructor, this component does not support Internet Explorer. Check Can I Use for more information.
MIT © connerfritz