How to use cropperjs - 10 common examples

//
        // Set crop options
        // extend default with custom config
        this.cropperOptions = Object.assign({
            aspectRatio,
            movable: false,
            scalable: false,
            zoomable: false,
            viewMode: 1,
            checkCrossOrigin: true
        }, this.cropperOptions);

        //
        // Set cropperjs
        this.cropper = new Cropper(image, this.cropperOptions);
    }

init: (imageElement: HTMLImageElement, valueAccessor) => {
                const observable = valueAccessor();
                const cropperInstance = new Cropper.default(imageElement, {
                    // aspectRatio: 1,
                    viewMode: 1,
                    responsive: true,
                    ready: () => {
                        this["croppable"] = true;
                    }
                });

                observable(cropperInstance);

                const onResize = () => {
                    cropperInstance["resize"]();
                };

                eventManager.addEventListener("onEditorResize", onResize);

ngAfterViewInit() {
    this.cropper = new Cropper(this.cropperContainer.nativeElement, {
      responsive: true,
      aspectRatio: 1,
      minContainerWidth: 128,
      minContainerHeight: 128,
      minCropBoxWidth: 50,
      minCropBoxHeight: 50,
      guides: false,
      autoCropArea: 1,
      background: true,
      modal: false,
      viewMode: 1,
      cropend: this.getCanvasData.bind(this),
      zoom: this.getCanvasData.bind(this),
      ready: this.getCanvasData.bind(this),
    });
  }

img.addEventListener('load', () => {
        imageWrapper.style.maxWidth = imageWrapper.getBoundingClientRect().width + 'px'
        imageWrapper.style.minHeight = imageWrapper.getBoundingClientRect().height + 'px'

        this.cropper = new CropperJs(imageBox, opts)
      }, {
        once: true,

() => {
        const canvas = getCanvasNode();
        const rect = canvas.getBoundingClientRect();
        const zoom = canvas.width / rect.width;

        this.cropper = new Cropper(canvas, {
          viewMode: 1,
          modal: false,
          background: false,
          rotatable: false,
          scalable: false,
          zoomable: false,
          movable: false,
          crop: event => {
            this.props.updateState({ cropDetails: event.detail });
          }
        });

        window.scaleflexPlugins = window.scaleflexPlugins || {};
        window.scaleflexPlugins.zoom = zoom;
        window.scaleflexPlugins.cropperjs = this.cropper;

async createCropper() {
      this.cropper = new Cropper(this.$refs.photoCanvas, {
        viewMode: 0,
        dragMode: 'move',
        cropBoxMovable: false,
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
        minCropBoxWidth: 512,
        minCropBoxHeight: 512,
        maxCropBoxWidth: 512,
        maxCropBoxHeight: 512,
        aspectRatio: 1,
        modal: true,
        guides: false,
        highlight: false,
        autoCropArea: 0.1,
        wheelZoomRatio: 0.03,
      })

mounted() {
		const useAspectRatio =
			this.minAspectRatio && this.maxAspectRatio ? undefined : this.aspectRatio;

		this.cropper = new Cropper(this.$refs.img, {
			aspectRatio: useAspectRatio,
			viewMode: 1,
			guides: false,
			rotatable: false,
			zoomable: false,
			autoCropArea: 1,
			checkCrossOrigin: false,
			ready: () => {
				if (this.disabled) {
					this.onDisabledChange();
				}

				if (this.value) {
					this.onValueChange();
				}

onActivate: ({ canvas, options }) => {
        cropper = new Cropper(canvas.current, options);
    },
    cancel: () => cropper && cropper.destroy(),

this.each((i, element) => {
      const $element = $(element);
      const isDestroy = option === 'destroy';
      let cropper = $element.data(NAMESPACE);

      if (!cropper) {
        if (isDestroy) {
          return;
        }

        const options = $.extend({}, $element.data(), $.isPlainObject(option) && option);

        cropper = new Cropper(element, options);
        $element.data(NAMESPACE, cropper);
      }

      if (typeof option === 'string') {
        const fn = cropper[option];

        if ($.isFunction(fn)) {
          result = fn.apply(cropper, args);

          if (result === cropper) {
            result = undefined;
          }

          if (isDestroy) {
            $element.removeData(NAMESPACE);
          }

this.$nextTick(function() {
          const $preview = $(this.$el).find('.c-image-attach-modal__preview')
          return (this.cropper = new Cropper($preview.find('img')[0], {
            setDragMode: 'crop',
            aspectRatio: 3 / 4,
            cropBoxResizable: true,
            ready() {
              return this.cropper.crop()
            },
          }))
        })
        return callback()