Create almost any cropper that you desire with Vue

Vue Advanced Cropper

The really flexible cropper that gives you opportunity to create almost any cropper that you desire.

Install

npm install --save vue-advanced-cropper

yarn add vue-advanced-cropper

If you would to use CDN read the corresponding documentation section

Usage

import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'

new Vue({
  el: '#app',
  data: {
    img: 'https://images.pexels.com/photos/226746/pexels-photo-226746.jpeg'
  },
  methods: {
    change({coordinates, canvas}) {
      console.log(coordinates, canvas)
    }
  },
  components: {
    Cropper
  }
})

<div id="app">
  <cropper
    classname="cropper"
    :src="img"
    :stencilProps="{
      aspectRatio: 10/12
    }"
    @change="change"
  ></cropper>
</div>

/*
  Maybe you need to set the limits for the cropper sizes or its container sizes
  otherwise a cropping image will try to fill all available space
*/
.cropper {
  height: 600px;
  background: #DDD;
}

Cropper

Prop	Type	Description	Default
src	String	The cropping image (link / base64)
stencilComponent	String, Object	The stencil component	RectangleStencil
stencilProps	Object	The props for the stencil component	{}
classname	String	The optional classname for the root cropper block
imageClassname	String	The optional classname for the cropping image
areaClassname	String	The optional classname for the area.
backgroundClassname	String	The optional classname for the background under the image
debounce	String, Number	The time before change event will be emitted after changes (ms)	500
minWidth	String, Number	The minimum width of the stencil (percents)	10
minHeight	String, Number	The minimum height of the stencil (percents)	10
maxWidth	String, Number	The maximum width of the stencil (percents)	10
maxHeight	String, Number	The maximum height of the stencil (percents)	10
defaultSize	Function	The function that returns the default size of the stencil	core.defaultSize
defaultPosition	Function	The function that returns the default position of the stencil	core.defaultPosition
areaSize	Function	The function that determines the area size	core.areaSize
resizeAlgorithm	Function	The function that determines the resize algorithm	core.resize
moveAlgorithm	Function	The function that determines the move algorithm	core.move

Event	Description
change	Invoked on changing of a stencil position / size, after mounting the component and on an image changing

RectangleStencil

Prop	Type	Description	Default
aspectRatio	Number, String,	The aspect ratio
minAspectRatio	Number, String,	The minimum aspect ratio
maxAspectRatio	Number, String,	The maximum aspect ratio
classname	String,	The classname for root block of the stencil component
previewClassname	String,	The classname for the preview component
boundingBoxClassname	String,	The classname for the bouding box component
handlerComponent	String,Object	The handler component
handlers	Object,	The object of handlers that should be visible or hidden.
handlersClassnames	Object,	The object of custom handler classnames
lineComponent	String,Object	The handler component
lines	Object,	The object of lines that should be visible or hidden.
linesClassnames	Object,	The object of custom line classnames

GitHub