How to use blueimp-load-image - 10 common examples

dropzone.on('addedfile', function(file) {
                var self = this;
                //in bulletins this container is hidden so you can see error message
                if (self.previewsContainer.classList.contains('hidden')) {
                    self.previewsContainer.classList.remove('hidden');
                }
                loadImage.parseMetaData(file, function (data) {
                    // use embedded thumbnail if exists.
                    if (data.exif) {
                        var thumbnail = data.exif.get('Thumbnail');
                        var orientation = data.exif.get('Orientation');
                        if (thumbnail && orientation) {
                            loadImage(thumbnail, function (img) {
                                self.emit('thumbnail', file, img.toDataURL());
                            }, { orientation: orientation });
                            return;
                        }
                    }
                    // use default implementation for PNG, etc.
                    self.createThumbnail(file);
                });
            });

const file = fileInput.files[0];
    if (file === undefined) {
      return;
    }
    if (file.size > 2 * 1024 * 1024) {
      // If file size is greater than 2 MB, show error message
      this.setState({
        isImageOversize: true,
      });
      return;
    }
    this.setState({
      isImageOversize: false,
    });
    uploadPhotoInit();
    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,
        },

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;

add(e, data) { // Upload begins
        // Disable form submit
        $(this).closest('form').find('input[type=submit]').attr('disabled', true)

        // Display image while uploading
        const file = data.files[0]
        data.context = $(tmpl('template-upload', file))
        $('#js-images').append(data.context)

        loadImage(file, ((img) => {
          data.context.find('img').replaceWith($(img).addClass('img-thumbnail square muted'))
        }), {
          maxWidth: 172,
          maxHeight: 172
        })

        // Show progressbar
        data.progressBar = data.context.find('.progress')

        // Presign file
        const options = {
          extension: file.name.match(/(\.\w+)?$/)[0],
          _: Date.now()
        }
        $.getJSON('/api/v1/presign', options, (result) => {
          data.formData = result.fields

const info = await Device.getInfo();
          let thumbnailData = null;
          let viewerData = null;
          thumbnailData = await PhotosService.compressPhoto(
            tempFile,
            PhotoType.Thumbnail,
            tempFile.type
          );
          if (info.model !== 'iPhone' && info.model !== 'iPad') {
            viewerData = await PhotosService.compressPhoto(
              tempFile,
              PhotoType.Viewer,
              tempFile.type
            );
          }
          loadImage.parseMetaData(
            tempFile,
            data => {
              const reader = new FileReader();

              let orientation = 1;
              if (data && data.exif) {
                orientation = data.exif.get('Orientation');
              }

              // Closure to capture the file information.
              reader.onload = ((loadedFile, loadedList, loadedOrientation) => {
                return async event => {
                  const originalData = event.target.result;
                  if (loadedOrientation) {
                    loadedFile.exifdata = {
                      tags: {

loadImage(file, canvas => {
        if (canvas.type === 'error') {
          return alert('The image could not be loaded.')
        }

        const scaled = loadImage.scale(canvas, {
          maxWidth: 400,
          maxHeight: 300,
          crop: true,
          downsamplingRatio: 0.5,
        })

        scaled.toBlob(blob => {
          this.setState({
            imageURL: URL.createObjectURL(blob)
          })

          this.props.onSelect(blob)
        }, 'image/jpeg')
      }, {
        // loadImage options