Image Crop & Paint Component For Vue.js

Image Crop & Paint Component For Vue.js

A Vue.js component that enables you to implement the crop and paint functionality on an image.

vue-painting

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

see:demo

Installation

NPM

npm install vue-painting --save

ES6:

import VuePainting from 'vue-painting'

new Vue({
  components: {
    VuePainting
  }
})

CommonJS:

const  VuePainting = require('vue-painting')

new Vue({
  components: {
    VuePainting
  }
})

Browser

<body>
  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-painting.js"></script>
  <script>
    new Vue({
      components: {
        'vue-painting': VuePainting
      }
    })
  </script>
</body>

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

Github Repository

Tags: #VueJs