How to use browser-image-compression - 8 common examples

export const compressImage = async (image, opts = {}) => {
  // gif图片不压缩
  if (image.type == "image/gif") {
    return image;
  }
  let options = {
    maxSizeMB: 0.8,
    maxWidthOrHeight: 300,
    useWebWorker: true,
    maxIteration: 5,
    ...opts
  };
  try {
    const compressedFile = await imageCompression(image, options);
    console.log(
      "compressedFile instanceof Blob",
      compressedFile instanceof Blob
    ); // true
    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
    return compressedFile;
    // await uploadToServer(compressedFile); // write your own logic
  } catch (error) {
    console.log(error);
  }
};
export function uploadImage(img) {

for (const file of Array.from(files)) {
            let error = '';

            // Max file size
            if ((file.size / 1024 / 1024 /*in MB*/) > this.maxFileSizeInMB) {
                error = `File exceeds ${this.maxFileSizeInMB} MB. Please upload a smaller file`;
                return;
            }

            try {
                const compressedFile = await this.compress(file);
                const metadata = await this.preview(compressedFile);

                // https://stackoverflow.com/a/32490603/10395024
                // https://i.stack.imgur.com/VGsAj.gif
                const exifOrientation = await imageCompression.getExifOrientation(file);

                this.previewImages.push({
                    file: compressedFile,
                    ...metadata,
                    exifOrientation,
                    errorMessage: error
                });

                this.changed.emit();
            } catch (error) {
                // TODO: error handling
            }
        }
    }

handleOnFileDropAccepted = async ([file]) => {
    // It's not an image
    if (file.type.slice(0, 5) !== 'image')
      return this.setState({
        imageFileDataURL: null,
        imageFileInfoMessage: 'File is not an image.'
      })

    // It's an image, try to compress it
    let compressedFile =
      file.type.slice(6, 9) === 'gif'
        ? file
        : await browserImageCompression(file, 0.3)
    // Sometimes compression can increase its size
    compressedFile = file.size < compressedFile.size ? file : compressedFile

    // It's still too big
    if (compressedFile.size > 3e6)
      return this.setState({
        imageFileDataURL: null,
        imageFileInfoMessage:
          'Image is too big and cannot be resized. It must be less than 100KB.'
      })

    // It's small enough now, check dimensions
    const imageFileDataURL = await browserImageCompression.getDataUrlFromFile(
      compressedFile
    )
    const img = await browserImageCompression.loadImage(imageFileDataURL)

file.type.slice(6, 9) === 'gif'
        ? file
        : await browserImageCompression(file, 0.3)
    // Sometimes compression can increase its size
    compressedFile = file.size < compressedFile.size ? file : compressedFile

    // It's still too big
    if (compressedFile.size > 3e6)
      return this.setState({
        imageFileDataURL: null,
        imageFileInfoMessage:
          'Image is too big and cannot be resized. It must be less than 100KB.'
      })

    // It's small enough now, check dimensions
    const imageFileDataURL = await browserImageCompression.getDataUrlFromFile(
      compressedFile
    )
    const img = await browserImageCompression.loadImage(imageFileDataURL)
    if (img.width < 250 || img.height < 250)
      return this.setState({
        imageFileDataURL: null,
        imageFileInfoMessage:
          'Image is too small. It must be more than 250px wide and 250px tall.'
      })

    // All good
    this.setState({
      imageFileDataURL,
      imageFileInfoMessage: null
    })
  }

// Sometimes compression can increase its size
    compressedFile = file.size < compressedFile.size ? file : compressedFile

    // It's still too big
    if (compressedFile.size > 3e6)
      return this.setState({
        imageFileDataURL: null,
        imageFileInfoMessage:
          'Image is too big and cannot be resized. It must be less than 100KB.'
      })

    // It's small enough now, check dimensions
    const imageFileDataURL = await browserImageCompression.getDataUrlFromFile(
      compressedFile
    )
    const img = await browserImageCompression.loadImage(imageFileDataURL)
    if (img.width < 250 || img.height < 250)
      return this.setState({
        imageFileDataURL: null,
        imageFileInfoMessage:
          'Image is too small. It must be more than 250px wide and 250px tall.'
      })

    // All good
    this.setState({
      imageFileDataURL,
      imageFileInfoMessage: null
    })
  }

reader.onload = () => {
            const arrayBuffer = reader.result

            imageCompression(file, 0.1, 800)
              .then(compressedFile => {
                writeFile(photo.compressedPath, compressedFile, writeOptions)
                photoProcessed()
              })
              .catch(() => {
                displayError()
                photoProcessed()
              })
            writeFile(photo.path, arrayBuffer, writeOptions)
              .then(() => {
                context.commit('prepend', photo)
                photoProcessed()
              })
              .catch(() => {
                displayError()
                photoProcessed()

private compress(file: File) {
        return imageCompression(file, {
            maxSizeMB: 1,
            maxWidthOrHeight: 600
        });
    }

PhotoType.Thumbnail,
          metadata.type
        );
        await StorageService.setItem(mainId + '-thumbnail', thumbnailData);

        rawPhoto = thumbnailData;
      } else {
        photoType = PhotoType.Download;
      }
    } else if (!rawPhoto && photoType === PhotoType.Viewer) {
      rawPhoto = await StorageService.getItem(mainId, false);
      const { Device } = Plugins;
      const info = await Device.getInfo();
      if (info.model !== 'iPhone' && info.model !== 'iPad') {
        const viewerData = await PhotosService.compressPhoto(
          await imageCompression.getFilefromDataUrl(rawPhoto),
          PhotoType.Viewer,
          metadata.type
        );
        await StorageService.setItem(mainId + '-viewer', viewerData, true);
        rawPhoto = viewerData;
      } else {
        photoType = PhotoType.Download;
      }
    }

    if (!rawPhoto) {
      return false;
    }

    if (rawPhoto && !rawPhoto.match('data:image/.*')) {
      metadata.type