Skip to content

Diman1988/upload-images-converter

Repository files navigation

Upload Images Converter

  • 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


Options

!IMPORTANT

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

Default options

Resolution 500 * 500

Image format webp

Show errors false

Custom options example

const parameters = {
    files: input.files, // Or files array
    width: 500, // defalut
    height: 500, // default
    format: ImageFormat.png,
    showErrors: true,
}

imageConvert(parameters)
.then((files) => ...);

How to use, example:

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:

ko-fi

I like images, but coffee motivate better :)