How to use the blueimp-load-image function in blueimp-load-image

loadImageToCanvas(url) {
      if (!url) {
        this.clearAll()
        return
      }

      this.imageLoading = true
      loadImage(
        url,
        img => {
          if (img.type === 'error') {
            this.imageLoadingError = true
            this.imageLoading = false
          } else {
            // load image data onto input canvas
            const ctx = document.getElementById('input-canvas').getContext('2d')
            ctx.drawImage(img, 0, 0)
            this.imageLoadingError = false
            this.imageLoading = false
            this.modelRunning = true
            // model predict
            this.$nextTick(function() {
              setTimeout(() => {
                this.runModel()

loadImageToCanvas(url) {
      if (!url) {
        this.clearAll()
        return
      }

      this.imageLoading = true
      loadImage(
        url,
        img => {
          if (img.type === 'error') {
            this.imageLoadingError = true
            this.imageLoading = false
          } else {
            // adjust canvas dimensions
            const inputCanvas = document.getElementById('input-canvas')
            inputCanvas.width = img.width
            inputCanvas.height = img.height
            this.inputImageShape = [img.height, img.width]
            const outputCanvas = document.getElementById('output-canvas')
            outputCanvas.width = img.width * 2
            outputCanvas.height = img.height * 2
            this.outputImageShape = [img.height * 2, img.width * 2]
            const scaledInputCanvas = document.getElementById('scaled-input-canvas')

loadImageToCanvas(file) {

                this.imageLoading = true
                loadImage(
                    file,
                    img => {
                        if (img.type === 'error') {
                            this.imageLoadingError = true
                            this.imageLoading = false
                        } else {
                            // adjust canvas dimensions
                            const inputCanvas = document.getElementById('input-canvas')
                            inputCanvas.width = img.width
                            inputCanvas.height = img.width
                            this.inputImageShape = [img.width, img.width]
                            const outputCanvas = document.getElementById('output-canvas')
                            outputCanvas.width = img.width
                            outputCanvas.height = img.width
                            this.outputImageShape = [img.width, img.width]
                            const scaledInputCanvas = document.getElementById('scaled-input-canvas')

} else if (rotation === 6 && originalOrientation === 8) {
          rotation = 3;
        } else if (rotation === 8 && originalOrientation === 3) {
          rotation = 6;
        } else if (rotation === 6 && originalOrientation === 3) {
          rotation = 8;
        }
      }
    }

    // Set photo orientation from exif
    if (rotate) {
      const imageOptions = {
        orientation: rotation
      };
      loadImage(
        base64,
        processedPhoto => {
          this.handleProcessedPhoto(processedPhoto);
        },
        imageOptions
      );
    } else {
      this.rotation = rotation;
      this.source = base64;
    }
  }

loadImageToCanvas(url: string) {
    if (!url) {
      const element = document.getElementById('input-canvas') as HTMLCanvasElement;
      const ctx = element.getContext('2d')as CanvasRenderingContext2D;
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      return;
    }
    loadImage(
        url,
        img => {
        if ((img as Event).type === 'error') {
            this.imageLoadingError = true;
            this.imageLoading = false;
        } else {
            // load image data onto input canvas
            const element = document.getElementById('input-canvas') as HTMLCanvasElement;
            const ctx = element.getContext('2d') as CanvasRenderingContext2D;
            const imageWidth = (img as HTMLImageElement).width;
            const imageHeight = (img as HTMLImageElement).height;
            ctx.drawImage(img as HTMLImageElement, 0, 0, imageWidth, 
              imageHeight, 0, 0, element.width, element.height);
            this.imageLoadingError = false;
            this.imageLoading = false;
            this.sessionRunning = true;

_.defer(() => {
                let container = $(this.element).parents().find(this.boundsSelector);
                loadImage(  this.fullImage, img => {
                    if(img.type === "error") {
                        this.closeFullSizeImage();
                    } else {
                        $(this.element).find('div').html(img);
                    }
                }, {
                    maxWidth: +container.width(),
                    maxHeight: +container.height(),
                    contain: true
                } );
            });
        } else {

onSelectFile(e) {
    if (e.target.files && e.target.files.length > 0) {
      loadImage(
        e.target.files[0],
        img => this.setState({ src: img.toDataURL('image/jpeg'), open: true }),
        {
          orientation: true,
          maxWidth: 250,
          maxHeight: 250
        }
      )
    }
  }

loadImage.parseMetaData(file, (data) => {
      let orientation = 0;
      if (data.exif) {
        orientation = data.exif.get('Orientation');
      }
      loadImage(
        file,
        (img) => {
          img.toBlob(
            (blobResult) => {
              uploadPhoto(handle, tokenV3, blobResult);
            },
          );
        }, {
          canvas: true,
          orientation,
        },
      );
    });
  }

const newFile = await new Promise(resolve => {
      loadImage(file, img => img.toBlob(blob => resolve(blob), 'image/jpeg'), {
        orientation: true,
        maxWidth: 2000,
        maxHeight: 2000
      })
    })