VueCrop

VueCrop is a lightweight cropping component less than 250 lines of code all in a single file, no external dependency, and yet still, provides suffient functionalities for photo cropping

Demo

https://klesh.github.io/vue-crop

Usage

CDN

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/@klesh/[email protected]/dist/vue-crop.min.js"></script>

<template>
  <div>
    <vue-crop src="photo.jpg" :ratio="ratio" v-model="box" @change="done"></vue-crop>
  </div>
</template>

<script>
var app = new Vue({
  el: '#app',
  data: {
    ratio: 0,
    box: null,
  },
  methods: {
    done() {
      console.log('done');
    }
  }
});
</script>

ESM

<template>
  <div>
    <vue-crop src="photo.jpg" :ratio="ratio" v-model="box" @change="done"></vue-crop>
  </div>
</template>

<script>
import VueCrop from 'https://unpkg.com/@klesh/[email protected]/dist/vue-crop.esm.js';

var app = new Vue({
  el: '#app',
  components: {VueCrop},
  data: {
    ratio: 0,
    box: null,
  },
  methods: {
    done() {
      console.log('done');
    }
  }
});
</script>

NPM

$ npm install @klesh/vue-crop

import VueCrop from '@klesh/vue-crop';

var app = new Vue({
  el: '#app',
  components: {VueCrop},
  data: {
    ratio: 0,
    box: null,
  },
  methods: {
    done() {
      console.log('done');
    }
  }
});