Nutritious Pumpkin Mash

    @klesh/vue-crop

    1.0.0 • Public • Published

    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/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/@klesh/vue-crop@1.0.0/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/vue-crop@1.0.0/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');
        }
      }
    });

    Install

    npm i @klesh/vue-crop

    DownloadsWeekly Downloads

    7

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    47.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • kleshwong