https://github.com/wotermelon/vue-painting

A Vue.js(v2.x+) component for cropping and painting image.
https://github.com/wotermelon/vue-painting

canvas cropper javascript konva painting vue

Last synced: about 1 month ago
JSON representation

A Vue.js(v2.x+) component for cropping and painting image.

• Host: GitHub
• URL: https://github.com/wotermelon/vue-painting
• Owner: wotermelon
• Created: 2018-04-19T03:23:26.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-01T01:57:50.000Z (over 6 years ago)
• Last Synced: 2024-10-25T23:08:49.023Z (3 months ago)
• Topics: canvas, cropper, javascript, konva, painting, vue
• Language: JavaScript
• Homepage:
• Size: 1.1 MB
• Stars: 50
• Watchers: 2
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-painting

A Vue.js(v2.x+) component for cropping and painting image.

see：[demo](https://wotermelon.github.io/vue-painting/)

## Installation

### NPM

```

npm install vue-painting --save

```

#### ES6:

```js

import VuePainting from 'vue-painting'

new Vue({

  components: {

    VuePainting

  }

})

```

#### CommonJS:

```js

const  VuePainting = require('vue-painting')

new Vue({

  components: {

    VuePainting

  }

})

```

### Browser

```html

  

  

  

    new Vue({

      components: {

        'vue-painting': VuePainting

      }

    })

  

```

## Usage

### Props

| Prop | Type   | Descrition                               |

| ---- | ------ | ---------------------------------------- |

| img  | String | The image source,can be `base64` and `url` |

### Events

| Name      | Param[Type]     | Descrition                        |

| --------- | --------------- | --------------------------------- |

| saveImage | clipImage[Blob] | dispatch when `save button` click |

| copyImage | clipImage[Blob] | dispatch when `√` click           |

| quit      |                 | dispatch when `quit`              |

## License

[MIT](https://opensource.org/licenses/MIT)