Vue-polygon-cropper NPM

vue-polygon-cropper

Vue polygon cropper lets you to crop image with any numbers of points with redo and undo functionality.

npm.io

Installation

npm install --save vue-polygon-cropper

or with yarn

yarn add vue-polygon-cropper

Demo

Checkout here gobeam.github.io/vue-polygon-cropper/

Example

Full Example with implementation here Example

Usage

// Global
import Vue from 'vue';
import VuePolygonCropper from 'vue-polygon-cropper';
Vue.component(VuePolygonCropper);

// Local
import VueCropper from 'vue-polygon-cropper';
export default {
  components: { VueCropper}
}

...
     <template>
         <div id="app">
             <polygon-crop :imageSource="'/demo.png'" ref="canvas"></polygon-crop>
             <button @click.prevent="crop">Crop</button>
             <button @click.prevent="undo">Undo</button>
             <button @click.prevent="redo">Redo</button>
             <button @click.prevent="reset">Reset</button>
     
         </div>
     </template>
     <script>
     
     	export default {
     		name: 'App',
     		methods: {
     			crop: function () {
     				this.$refs.canvas.crop();
     			},
     			undo: function () {
     				this.$refs.canvas.undo();
     			},
     			redo: function () {
     				this.$refs.canvas.redo();
     			},
     			reset: function () {
     				this.$refs.canvas.reset();
     			}
     		}
     	};
     </script>
...

Options

Name	Type	Required	Description
imageSource	String	required	Image url or base64 to load on canvas.
canvasClass	String	optional	Pass class to canvas to load your custom style.
wrapperClass	String	optional	Pass class to div wrapper of canvas to load your custom style.
pointerClass	String	optional	Pass class to pointer to load your custom style and customize it.
showCanvas	Boolean	optional	Default true but pass false in order to hide image canvas.
showPointer	Boolean	optional	Default true but pass false in order to hide pointers.
width	Number	optional	Pass width to canvas.
height	Number	optional	Pass height to canvas.