Cropper JS

Cropper js is a react plugin which is image cropper.

Basic example

Advanced JavaScript image cropper.

picture
Xpx
Ypx
Widthpx
Heightpx
Rotatedeg
ScaleX
ScaleY
<div class="row">
	<div class="col-md-8">
		<div class="img-container">
			<img src="dist/img/cropper.jpg" alt="Picture">
		</div>
	</div>
	<div class="col-md-4">
		<div class="docs-preview clearfix">
			<div class="img-preview preview-lg"></div>
			<div class="img-preview preview-md"></div>
			<div class="img-preview preview-sm"></div>
			<div class="img-preview preview-xs"></div>
		</div>
		<div class="docs-data">
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataX">X</label>
				<input type="text" class="form-control" id="dataX" placeholder="x">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataY">Y</label>
				<input type="text" class="form-control" id="dataY" placeholder="y">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataWidth">Width</label>
				<input type="text" class="form-control" id="dataWidth" placeholder="width">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataHeight">Height</label>
				<input type="text" class="form-control" id="dataHeight" placeholder="height">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataRotate">Rotate</label>
				<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
				<span class="input-group-text">deg</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleX">ScaleX</label>
				<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleY">ScaleY</label>
				<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
			</div>
		</div>
	</div>
</div>
<!-- Cropper JS -->
<script src="vendors/cropperjs/dist/cropper.min.js"></script>
window.onload = function () {
	'use strict';
	var Cropper = window.Cropper;
	var URL = window.URL || window.webkitURL;
	var container = document.querySelector('.img-container');
	var image = container.getElementsByTagName('img').item(0);
	var download = document.getElementById('download');
	var actions = document.getElementById('actions');
	var dataX = document.getElementById('dataX');
	var dataY = document.getElementById('dataY');
	var dataHeight = document.getElementById('dataHeight');
	var dataWidth = document.getElementById('dataWidth');
	var dataRotate = document.getElementById('dataRotate');
	var dataScaleX = document.getElementById('dataScaleX');
	var dataScaleY = document.getElementById('dataScaleY');
	var options = {
		aspectRatio: 16 / 9,
		preview: '.img-preview',
		ready: function (e) {
		console.log(e.type);
		},
		cropstart: function (e) {
		console.log(e.type, e.detail.action);
		},
		cropmove: function (e) {
		console.log(e.type, e.detail.action);
		},
		cropend: function (e) {
		console.log(e.type, e.detail.action);
		},
		crop: function (e) {
		var data = e.detail;
		console.log(e.type);
		dataX.value = Math.round(data.x);
		dataY.value = Math.round(data.y);
		dataHeight.value = Math.round(data.height);
		dataWidth.value = Math.round(data.width);
		dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
		dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
		dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
		},
		zoom: function (e) {
		console.log(e.type, e.detail.ratio);
		}
	};
	var cropper = new Cropper(image, options);
	};
<template>
    <BContainer class="py-3">
        <BRow>
          <BCol md="8">
            <div class="img-container">
              <vue-cropper
                ref="cropper"
                :guides="true"
                :view-mode="viewmodeselected"
                drag-mode="crop"
                :aspect-ratio="16 / 9"
                :auto-crop-area="0.5"
                :min-container-width="10"
                :min-container-height="10"
                :background="true"
                :rotatable="true"
                :movable="true"
                :src="CropperImg"
                alt="Source Image"
                :ready="ready"
                :crop="cropImage"
                :img-style="{ width: '800px', height: '500px' }"
                preview=".img-preview"
              >
              </vue-cropper>
            </div>
          </BCol>
          <BCol md="4">
            <div class="docs-preview clearfix">
              <div class="img-preview preview-lg"></div>
              <div class="img-preview preview-md"></div>
              <div class="img-preview preview-sm"></div>
              <div class="img-preview preview-xs"></div>
            </div>
            <div class="docs-data">
              <BInputGroup size="sm" >
                <BInputGroupText tag="label" for="dataX">X</BInputGroupText>
                <BFormInput
                    type="text"
                    id="dataX"
                    placeholder="x"
                    :model-value="imageData.x" />
                <BInputGroupText>px</BInputGroupText>
              </BInputGroup>
              <BInputGroup size="sm" >
                <BInputGroupText tag="label" for="dataY">Y</BInputGroupText>
                <BFormInput
                    type="text"
                    id="dataY"
                    placeholder="y"
                    :model-value="imageData.y" />
                <BInputGroupText>px</BInputGroupText>
              </BInputGroup>
              <BInputGroup size="sm" >
                <BInputGroupText tag="label" for="dataWidth">Width</BInputGroupText>
                <BFormInput
                  type="text"
                  id="dataWidth"
                  placeholder="width"
                  :model-value="imageData.width"
                />
                <BInputGroupText>px</BInputGroupText>
              </BInputGroup>
              <BInputGroup size="sm" >
                <BInputGroupText tag="label" for="dataHeight">Height</BInputGroupText>
                <BFormInput
                  type="text"
                  id="dataHeight"
                  placeholder="height"
                  :model-value="imageData.height"
                />
                <BInputGroupText>px</BInputGroupText>
              </BInputGroup>
              <BInputGroup size="sm" >
                <BInputGroupText tag="label" for="dataRotate">Rotate</BInputGroupText>
                <BFormInput
                  type="text"
                  id="dataRotate"
                  placeholder="rotate"
                  :model-value="imageData.rotate"
                />
                <BInputGroupText>deg</BInputGroupText>
              </BInputGroup>
              <BInputGroup size="sm" >
                <BInputGroupText tag="label" for="dataScaleX">ScaleX</BInputGroupText>
                <BFormInput
                  type="text"
                  id="dataScaleX"
                  placeholder="scaleX"
                  :model-value="imageData.scaleX"
                />
              </BInputGroup>
              <BInputGroup size="sm" >
                <BInputGroupText tag="label" for="dataScaleY">ScaleY</BInputGroupText>
                <BFormInput
                  type="text"
                  id="dataScaleY"
                  placeholder="scaleY"
                  :model-value="imageData.scaleY"
                />
              </BInputGroup>
            </div>
          </BCol>
        </BRow>
        <BRow class="mt-4" id="actions">
          <BCol md="8" class="docs-buttons">
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="setDragMode"
                data-option="move"
                title="Move"
                id="move"
                v-on:click="moveImage"
              >
                <span title='cropper.setDragMode("move")'>
                  <span class="fa fa-arrows"></span>
                </span>
              </BButton>
              <BButton
              class="btn btn-primary br-right"
              type="button"
              data-method="setDragMode"
              data-option="crop"
              title="Crop"
              id="crop"
              v-on:click="cropImage"
            >
              <span class="fa fa-crop"></span>
            </BButton>
            </BButtonGroup>
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="zoom"
                data-option="0.1"
                title="Zoom In"
                v-on:click="zoom(0.1)"
              >
                <span title="cropper.zoom(0.1)">
                  <span class="fa fa-search-plus"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="zoom"
                data-option="-0.1"
                title="Zoom Out"
                v-on:click="zoom(-0.1)"
              >
                <span title="cropper.zoom(-0.1)">
                  <span class="fa fa-search-minus"></span>
                </span>
              </BButton>
            </BButtonGroup>
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="move"
                data-option="-10"
                data-second-option="0"
                title="Move Left"
                v-on:click="moveImageLeft"
              >
                <span title="cropper.move(-10, 0)">
                  <span class="fa fa-arrow-left"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="move"
                data-option="10"
                data-second-option="0"
                title="Move Right"
                v-on:click="moveImageRight"
              >
                <span title="cropper.move(10, 0)">
                  <span class="fa fa-arrow-right"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="move"
                data-option="0"
                data-second-option="-10"
                title="Move Up"
                v-on:click="moveImageUp"
              >
                <span title="cropper.move(0, -10)">
                  <span class="fa fa-arrow-up"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="move"
                data-option="0"
                data-second-option="10"
                title="Move Down"
                v-on:click="moveImageDown"
              >
                <span title="cropper.move(0, 10)">
                  <span class="fa fa-arrow-down"></span>
                </span>
              </BButton>
            </BButtonGroup>
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="rotate"
                data-option="-45"
                title="Rotate Left"
                v-on:click="rotateLeft"
              >
                <span title="cropper.rotate(-45)">
                  <span class="fa fa-undo"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="rotate"
                data-option="45"
                title="Rotate Right"
                v-on:click="rotateRight"
              >
                <span title="cropper.rotate(45)">
                  <span class="fa fa-rotate-right"></span>
                </span>
              </BButton>
            </BButtonGroup>
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="scaleX"
                data-option="-1"
                title="Flip Horizontal"
                v-on:click="fliphorizontal"
              >
                <span title="cropper.scaleX(-1)">
                  <span class="fa fa-arrows-h"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="scaleY"
                data-option="-1"
                title="Flip Vertical"
                v-on:click="flipvertical"
              >
                <span title="cropper.scaleY(-1)">
                  <span class="fa fa-arrows-v"></span>
                </span>
              </BButton>
            </BButtonGroup>
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="crop"
                title="Crop"
              >
                <span title="cropper.crop()">
                  <span class="fa fa-check"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="clear"
                title="Clear"
                v-on:click="clear"
              >
                <span title="cropper.clear()">
                  <span class="fa fa-remove"></span>
                </span>
              </BButton>
            </BButtonGroup>
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="disable"
                title="Disable"
                v-on:click="disable"
              >
                <span title="cropper.disable()">
                  <span class="fa fa-lock"></span>
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="enable"
                title="Enable"
                v-on:click="enable"
              >
                <span title="cropper.enable()">
                  <span class="fa fa-unlock"></span>
                </span>
              </BButton>
            </BButtonGroup>
            <BButtonGroup>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="reset"
                title="Reset"
                v-on:click="reset"
              >
                <span title="cropper.reset()">
                  <span class="fa fa-refresh"></span>
                </span>
              </BButton>
              <label
                class="btn btn-primary btn-upload mb-0"
                data-toggle="tooltip"
                data-placement="top"
                for="inputImage"
                title="Upload image file"
              >
                <input
                  type="file"
                  class="sr-only"
                  id="inputImage"
                  name="file"
                  accept="image/*"
                  @change="setImage"
                />
                <span title="Import image with Blob URLs">
                  <span class="fa fa-upload"></span>
                </span>
              </label>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                data-method="destroy"
                title="Destroy"
                v-on:click="destroy"
              >
                <span title="cropper.destroy()">
                  <span class="fa fa-power-off"></span>
                </span>
              </BButton>
            </BButtonGroup>
            <BButtonGroup class="btn-group-crop">
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                title="getCroppedCanvas"
                data-method="getCroppedCanvas"
                data-bs-toggle="modal" data-bs-target="#getCroppedCanvasModal"
                v-on:click="getCroppedCanvas"
              >
                <span title="cropper.getCroppedCanvas()"> Get Cropped Canvas </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                title="cropper.getCroppedCanvas({ width: 160, height: 90 })"
                data-method="getCroppedCanvas"
                data-option='{ "width": 160, "height": 90 }'
                data-bs-toggle="modal" data-bs-target="#getCroppedCanvasModal"
                v-on:click="getCroppedCanvas16090"
              >
                <span title="cropper.getCroppedCanvas({ width: 160, height: 90 })">
                  160&times;90
                </span>
              </BButton>
              <BButton
                variant="primary"
                data-toggle="tooltip"
                data-placement="top"
                title="cropper.getCroppedCanvas({ width: 320, height: 180 })"
                data-method="getCroppedCanvas"
                data-option='{ "width": 320, "height": 180 }'
                data-bs-toggle="modal" data-bs-target="#getCroppedCanvasModal"
                v-on:click="getCroppedCanvas320180"
              >
                <span title="cropper.getCroppedCanvas({ width: 320, height: 180 })">
                  320&times;180
                </span>
              </BButton>
            </BButtonGroup>
            <div
              class="modal fade docs-cropped"
              id="getCroppedCanvasModal"
              role="dialog"
              aria-hidden="true"
              aria-labelledby="getCroppedCanvasTitle"
              tabindex="-1"
            >
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
                    <BButton
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-hidden="true"
                    >
                      &times;
                    </BButton>
                  </div>
                  <div class="modal-body">
                    <img :src="croppedImg" ></img>
                  </div>
                  <div class="modal-footer">
                    <a
                      variant="primary"
                      id="download"
                      :href="croppedImg"
                      download="cropped.jpeg"
                      >Download</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.getData()"
              data-method="getData"
              data-option
              data-target="#putData"
              v-on:click="getCropperdata"
            >
              <span title="cropper.getData()"> Get Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.setData(data)"
              data-method="setData"
              data-target="#putData"
              v-on:click="setData"
            >
              <span title="cropper.setData(data)"> Set Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.getContainerData()"
              data-method="getContainerData"
              data-option
              data-target="#putData"
              v-on:click="getContainerdata"
            >
              <span title="cropper.getContainerData()"> Get Container Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.getImageData()"
              data-method="getImageData"
              data-option
              data-target="#putData"
              v-on:click="getImagedata"
            >
              <span title="cropper.getImageData()"> Get Image Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.getCanvasData()"
              data-method="getCanvasData"
              data-option
              data-target="#putData"
              v-on:click="getCanvasData"
            >
              <span title="cropper.getCanvasData()"> Get Canvas Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.setCanvasData(data)"
              data-method="setCanvasData"
              data-target="#putData"
              v-on:click="setCanvasData"
            >
              <span title="cropper.setCanvasData(data)"> Set Canvas Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.getCropBoxData()"
              data-method="getCropBoxData"
              data-option
              data-target="#putData"
              v-on:click="getCropBoxData"
            >
              <span title="cropper.getCropBoxData()"> Get Crop Box Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.setCropBoxData(data)"
              data-method="setCropBoxData"
              data-target="#putData"
              v-on:click="setCropBoxData"
            >
              <span title="cropper.setCropBoxData(data)"> Set Crop Box Data </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.moveTo(0)"
              data-method="moveTo"
              data-option="0"
              v-on:click="moveImageTo"
            >
              <span title="cropper.moveTo(0)"> 0,0 </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.zoomTo(1)"
              data-method="zoomTo"
              data-option="1"
              v-on:click="zoom100"
            >
              <span title="cropper.zoomTo(1)"> 100% </span>
            </BButton>
            <BButton
              type="button"
              variant="primary"
              data-toggle="tooltip"
              data-placement="top"
              title="cropper.rotateTo(180)"
              data-method="rotateTo"
              data-option="180"
              v-on:click="rotate180"
            >
              <span title="cropper.rotateTo(180)"> 180° </span>
            </BButton>
            <BFormInput
              type="text"
              class="mt-3"
              id="putData"
              v-model="putData"
              placeholder="Get data to here or set data with this value"
            />
          </BCol>
          <BCol md="4" class="docs-toggles">
            <BButtonGroup class="docs-aspect-ratios" data-toggle="buttons">
              <label
                class="btn btn-primary active"
                data-toggle="tooltip"
                data-placement="top"
                title="aspectRatio: 16 / 9"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="aspectRatio1"
                  name="aspectRatio"
                  value="1.7777777777777777"
                  v-on:click="setAspectRatio(16 / 9)"
                />
                <span title="aspectRatio: 16 / 9"> 16:9 </span>
              </label>
              <label
                class="btn btn-primary"
                data-toggle="tooltip"
                data-placement="top"
                title="aspectRatio: 4 / 3"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="aspectRatio2"
                  name="aspectRatio"
                  value="1.3333333333333333"
                  v-on:click="setAspectRatio(4 / 3)"
                />
                <span title="aspectRatio: 4 / 3"> 4:3 </span>
              </label>
              <label
                class="btn btn-primary"
                data-toggle="tooltip"
                data-placement="top"
                title="aspectRatio: 1 / 1"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="aspectRatio3"
                  name="aspectRatio"
                  value="1"
                  v-on:click="setAspectRatio(1 / 1)"
                />
                <span title="aspectRatio: 1 / 1"> 1:1 </span>
              </label>
              <label
                class="btn btn-primary"
                data-toggle="tooltip"
                data-placement="top"
                title="aspectRatio: 2 / 3"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="aspectRatio4"
                  name="aspectRatio"
                  value="0.6666666666666666"
                  v-on:click="setAspectRatio(2/3)"
                />
                <span title="aspectRatio: 2 / 3"> 2:3 </span>
              </label>
              <label
                class="btn btn-primary"
                data-toggle="tooltip"
                data-placement="top"
                title="aspectRatio: NaN"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="aspectRatio5"
                  name="aspectRatio"
                  value="NaN"
                  v-on:click="setAspectRatio(NaN)"
                />
                <span title="aspectRatio: NaN"> Free </span>
              </label>
            </BButtonGroup>
            <BButtonGroup class="docs-view-modes" data-toggle="buttons">
              <label
                class="btn btn-primary active"
                data-toggle="tooltip"
                data-placement="top"
                title="getCroppedCanvas"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="viewMode0"
                  name="viewMode"
                  value="0"
                  checked
                />
                <span title="View Mode 0"> VM0 </span>
              </label>
              <label
                class="btn btn-primary"
                data-toggle="tooltip"
                data-placement="top"
                title="View Mode 31"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="viewMode1"
                  name="viewMode"
                  value="1"
                />
                <span title="View Mode 1"> VM1 </span>
              </label>
              <label
                class="btn btn-primary"
                data-toggle="tooltip"
                data-placement="top"
                title="View Mode 2"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="viewMode2"
                  name="viewMode"
                  value="2"
                />
                <span title="View Mode 2"> VM2 </span>
              </label>
              <label
                class="btn btn-primary"
                data-toggle="tooltip"
                data-placement="top"
                title="View Mode 3"
              >
                <input
                  type="radio"
                  class="sr-only"
                  id="viewMode3"
                  name="viewMode"
                  value="3"
                />
                <span title="View Mode 3"> VM3 </span>
              </label>
            </BButtonGroup>
          </BCol>
        </BRow>
    </BContainer>
</template>
<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      myimgSrc: "cropper.jpg",
      imgSrc: "",
      imageData: "",
      containerData: "",
      putData: "",
      viewmodeselected: 0,
      cropImg: "",
      croppedImg: "",
    };
  },
  methods: {
    getImgUrl() {
        var images = require.context("@/assets/img/", false, /.jpg$/);
        return images("./" + this.myimgSrc);
    },
    ready() {
        this.containerData = this.$refs.cropper.getContainerData();
    },
    cropImage() {
        this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        this.imageData = this.$refs.cropper.getData();
    },
    moveImage() {
        this.$refs.cropper.move(1);
    },
    zoom(percent) {
        this.$refs.cropper.relativeZoom(percent);
    },
    zoom100() {
        this.$refs.cropper.zoomTo(1);
    },
    moveImageLeft() {
        this.$refs.cropper.move(-10, 0);
    },
    moveImageRight() {
        this.$refs.cropper.move(10, 0);
    },
    moveImageUp() {
        this.$refs.cropper.move(0, 10);
    },
    moveImageDown() {
        this.$refs.cropper.move(0, -10);
    },
    moveImageTo() {
        this.$refs.cropper.moveTo(0);
    },
    rotateLeft() {
        this.$refs.cropper.rotate(-45);
    },
    rotateRight() {
        this.$refs.cropper.rotate(45);
    },
    rotate180() {
        this.$refs.cropper.rotateTo(180);
    },
    fliphorizontal() {
        if (this.imageData.scaleX === 1) {
            this.$refs.cropper.scale(-1, 1);
        } else {
            this.$refs.cropper.scale(1, 1);
        }
    },
    flipvertical() {
        if (this.imageData.scaleY === 1) {
            this.$refs.cropper.scale(1, -1);
        } else {
            this.$refs.cropper.scale(1, 1);
        }
    },
    scaleImage() {
        this.$refs.cropper.scale(-2, -1);
    },
    clear() {
        this.$refs.cropper.clear();
    },
    disable() {
        this.$refs.cropper.disable();
    },
    enable() {
        this.$refs.cropper.enable();
    },
    reset() {
        this.$refs.cropper.reset();
    },
    destroy() {
        this.$refs.cropper.destroy();
    },
    setImage(e) {
        const file = e.target.files[0];
        if (file.type.indexOf("image/") === -1) {
            alert("Please select an image file");
            return;
        }
        if (typeof FileReader === "function") {
            const reader = new FileReader();
            reader.onload = (event) => {
                this.imgSrc = event.target.result;
                // rebuild cropperjs with the updated source
                this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
        } else {
            alert("Sorry, FileReader API not supported");
        }
    },
    getCroppedCanvas() {
        this.croppedImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
    },
    getCroppedCanvas16090() {
        this.croppedImg = this.$refs.cropper.getCroppedCanvas({ width: 160, height: 90 }).toDataURL();
    },
    getCroppedCanvas320180() {
        this.croppedImg = this.$refs.cropper.getCroppedCanvas({ width: 320, height: 180 }).toDataURL();
    },
    getCropperdata() {
        var data = this.$refs.cropper.getData();
        this.putData =
            '{"x":' +
            data.x +
            ',"y":' +
            data.y +
            ',"width":' +
            data.width +
            ',"height":' +
            data.height +
            ',"rotate":' +
            data.rotate +
            ',"scaleX":' +
            data.scaleX +
            ',"scaleY":' +
            data.scaleY +
            "}";
    },
    setData() {
        if (!this.putData) return;
        this.$refs.cropper.setData(JSON.parse(this.putData));
    },
    getContainerdata() {
        var data = this.$refs.cropper.getContainerData();
        this.putData =
            '{"width":' + data.width + ',"height":' + data.height + "}";
    },
    getImagedata() {
        var data = this.$refs.cropper.getImageData();
        this.putData =
            '{"naturalWidth":' +
            data.naturalWidth +
            ',"naturalHeight":' +
            data.naturalHeight +
            ',"aspectRatio":' +
            data.aspectRatio +
            ',"width":' +
            data.width +
            ',"height":' +
            data.height +
            ',"left":' +
            data.left +
            ',"top":' +
            data.top +
            "}";
    },
    getCanvasData() {
        var data = this.$refs.cropper.getCanvasData();
        this.putData =
            '{"left":' +
            data.left +
            ',"top":' +
            data.top +
            ',"width":' +
            data.width +
            ',"height":' +
            data.height +
            ',"naturalWidth":' +
            data.naturalWidth +
            ',"naturalHeight":' +
            data.naturalHeight +
            "}";
    },
    setCanvasData() {
        if (!this.putData) return;
        this.$refs.cropper.setCanvasData(JSON.parse(this.putData));
    },
    getCropBoxData() {
        var data = this.$refs.cropper.getCropBoxData();
        this.putData =
            '{"left":' +
            data.left +
            ',"top":' +
            data.top +
            ',"width":' +
            data.width +
            ',"height":' +
            data.height +
            "}";
    },
    setCropBoxData() {
        if (!this.putData) return;
        this.$refs.cropper.setCropBoxData(JSON.parse(this.putData));
    },
    //setAspectRatio
    setAspectRatio(aspectRatio) {
        this.$refs.cropper.setAspectRatio(aspectRatio);
    },
  },
};
</script>
<div class="row">
	<div class="col-md-8">
		<div class="img-container">
			<img src="dist/img/cropper.jpg" alt="Picture">
		</div>
	</div>
	<div class="col-md-4">
		<div class="docs-preview clearfix">
			<div class="img-preview preview-lg"></div>
			<div class="img-preview preview-md"></div>
			<div class="img-preview preview-sm"></div>
			<div class="img-preview preview-xs"></div>
		</div>
		<div class="docs-data">
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataX">X</label>
				<input type="text" class="form-control" id="dataX" placeholder="x">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataY">Y</label>
				<input type="text" class="form-control" id="dataY" placeholder="y">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataWidth">Width</label>
				<input type="text" class="form-control" id="dataWidth" placeholder="width">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataHeight">Height</label>
				<input type="text" class="form-control" id="dataHeight" placeholder="height">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataRotate">Rotate</label>
				<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
				<span class="input-group-text">deg</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleX">ScaleX</label>
				<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleY">ScaleY</label>
				<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-8">
		<div class="img-container">
			<img src="dist/img/cropper.jpg" alt="Picture">
		</div>
	</div>
	<div class="col-md-4">
		<div class="docs-preview clearfix">
			<div class="img-preview preview-lg"></div>
			<div class="img-preview preview-md"></div>
			<div class="img-preview preview-sm"></div>
			<div class="img-preview preview-xs"></div>
		</div>
		<div class="docs-data">
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataX">X</label>
				<input type="text" class="form-control" id="dataX" placeholder="x">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataY">Y</label>
				<input type="text" class="form-control" id="dataY" placeholder="y">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataWidth">Width</label>
				<input type="text" class="form-control" id="dataWidth" placeholder="width">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataHeight">Height</label>
				<input type="text" class="form-control" id="dataHeight" placeholder="height">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataRotate">Rotate</label>
				<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
				<span class="input-group-text">deg</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleX">ScaleX</label>
				<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleY">ScaleY</label>
				<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
			</div>
		</div>
	</div>
</div>