vue-xcrop
Version:
A simple mobile image cropper for Vue 1/2
66 lines • 1.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-crop</title>
</head>
<body>
<div id="app">
<input type="file" @change="onChange($event)" accept="image/*" :value="''">
<crop
:target="file"
@on-cancle="onCancle"
@on-confirm="onConfirm"
@on-dragstart="onDragstart"
@on-dragmove="onDragmove"
@on-dragend="onDragend"
>
</crop>
<img v-for="item in imgs" :src="item.url" :style="{ width: item.width + 'px' }">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.0/vue.min.js"></script> -->
<script src="./vuecrop.js"></script>
<script>
new Vue({
el: '#app',
data: {
file: '',
imgs: []
},
methods: {
onChange: function (e) {
this.file = e.target.files[0]
},
onCancle: function () {
this.clear()
},
onConfirm: function (crop) {
// 裁剪不同的尺寸：600、300、150
const imgs = [
{ url: crop.get({width: 600, format: 'url'}).url, width: 300 },
{ url: crop.get({width: 300, format: 'url'}).url, width: 150 },
{ url: crop.get({width: 150, format: 'url'}).url, width: 75 }
]
this.imgs = this.imgs.concat(imgs)
this.clear()
},
onDragstart: function (e) {
console.log('dragstart')
},
onDragmove: function (e) {
console.log('dragmove')
},
onDragend: function (e) {
console.log('dragend')
},
clear: function () {
this.file = ''
}
}
})
</script>
</body>
</html>