- Need to crop and scale image with custom resolution?
- Resize, scale, convert images on client side before upload on your server?
- Do you have a different image sizes? Make them similar!
Crop, scale and convert images from image/* to webp, jpg, png on client side before upload them to a server.
Script crops an image by center with proportions of target resolution and scales it.
!!Important some browsers don't convert to webp and will return png file
It will logged in error console if error flag is true
Since version 2.0.0 the function accepts not separate parameters, but an object:
const parameters = {
files: input.files, // Or files array
width: 500, // defalut
height: 500, // default
format: ImageFormat.png,
showErrors: true,
}
FileList - Object from input element
Width - number
Height - number
MIMO image format - default is "image/webp"
Show errors - boolean
Resolution 500 * 500
Image format webp
Show errors false
const parameters = {
files: input.files, // Or files array
width: 500, // defalut
height: 500, // default
format: ImageFormat.png,
showErrors: true,
}
imageConvert(parameters)
.then((files) => ...);
import { imageConverter } from "upload-images-converter";
// ... code before
<input
accept="image/*"
type="file"
name="file"
multiple
onChange={(value) => {
imageConvert({files: value.target.files}) // Options: FileList, Width, Height, MIMO format (string), false
.then(files => {
// ... do something with new images ...
});
}
/>
// ... code after
If you wanna say thanks to me, please:
I like images, but coffee motivate better :)