https://github.com/gobeam/vue-polygon-cropper

Vue polygon cropper lets you to crop image with any numbers of points with redo and undo functionality.
https://github.com/gobeam/vue-polygon-cropper

cropper freecrop image js npm npm-package package polygon redo undo vue vuejs

Last synced: 17 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gobeam/vue-polygon-cropper
• Owner: gobeam
• License: mit
• Created: 2020-05-22T14:23:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-31T13:21:40.000Z (over 3 years ago)
• Last Synced: 2024-10-10T01:05:48.148Z (28 days ago)
• Topics: cropper, freecrop, image, js, npm, npm-package, package, polygon, redo, undo, vue, vuejs
• Language: Vue
• Homepage: https://gobeam.github.io/vue-polygon-cropper/
• Size: 5.2 MB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# vue-polygon-cropper

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

[![NPM](https://nodei.co/npm/vue-polygon-cropper.png?downloads=true)](https://nodei.co/npm/vue-polygon-cropper/)

![](cropper.gif)

## Installation

```shell

npm install --save vue-polygon-cropper

```

or with yarn

```shell

yarn add vue-polygon-cropper

```

## Demo

Checkout here **[gobeam.github.io/vue-polygon-cropper/](https://gobeam.github.io/vue-polygon-cropper/)**

## Example

Full Example with implementation here **[Example](https://github.com/gobeam/vue-polygon-cropper/tree/master/example)**

## Usage

```vue

// 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}

}

...

     

         


             

             Crop

             Undo

             Redo

             Reset

     

         

     

     

     

     	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();

     			}

     		}

     	};

     

...

```


## 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.                                            |

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

Released under the MIT License - see `LICENSE.txt` for details.