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
https://klesh.github.io/vue-crop
<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><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 install @klesh/vue-cropimport VueCrop from '@klesh/vue-crop';
var app = new Vue({
el: '#app',
components: {VueCrop},
data: {
ratio: 0,
box: null,
},
methods: {
done() {
console.log('done');
}
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent