78 lines
1.5 KiB
JavaScript
78 lines
1.5 KiB
JavaScript
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
options: {},
|
|
position: {},
|
|
defaultOptions: {
|
|
container: {
|
|
width: '100%',
|
|
height: 400
|
|
},
|
|
viewport: {
|
|
width: 200,
|
|
height: 200,
|
|
type: 'circle',
|
|
border: {
|
|
width: 2,
|
|
enable: true,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
zoom: {
|
|
enable: true,
|
|
mouseWheel: true,
|
|
slider: true
|
|
},
|
|
rotation: {
|
|
slider: true,
|
|
enable: true,
|
|
position: 'left'
|
|
},
|
|
transformOrigin: 'viewport',
|
|
},
|
|
cropme: {},
|
|
el: {}
|
|
},
|
|
watch: {
|
|
options: {
|
|
handler: function(val) {
|
|
this.cropme.reload(val)
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
created:function() {
|
|
this.options = JSON.parse(JSON.stringify(this.defaultOptions))
|
|
},
|
|
mounted:function() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init:function() {
|
|
this.el = document.getElementById('cropme')
|
|
this.cropme = new Cropme(this.el, this.options)
|
|
this.cropme.bind({
|
|
url: 'images/pic.jpeg',
|
|
})
|
|
},
|
|
getPosition:function() {
|
|
this.position = this.cropme.position()
|
|
$('#cropmePosition').modal()
|
|
},
|
|
crop:function() {
|
|
let img = document.getElementById('cropme-result')
|
|
this.cropme.crop({
|
|
width: 600
|
|
}).then(function(res) {
|
|
img.src = res
|
|
$('#cropmeModal').modal()
|
|
})
|
|
},
|
|
reset:function() {
|
|
this.options = JSON.parse(JSON.stringify(this.defaultOptions))
|
|
this.cropme.destroy()
|
|
this.init()
|
|
}
|
|
}
|
|
})
|